How To Easily Use Flutter Positioned Widget - Example Code

In this Flutter post, we will learn how to practically use and customize Flutter positioned widget by using proper Flutter example. We will be using multiple Flutter examples to properly demonstrate the role of Flutter positioned widget.

After reading this post, I am sure you will be able to incorporate Flutter positioned widget in your Flutter apps with ease.

What is Flutter Positioned Widget?

As the name suggests, it is used to specify the position/place of its child widget. Let’s use a Flutter stack widget example to understand how the Flutter positioned widget works.

Implementing Flutter Positioned Widget (Easy Examples)

For that, we first have to define a simple Flutter stack widget. See below code:

Container(
             height: 200,
             width: 200,
             color: Colors.grey,
               child: Stack(children: [
                      Container(height: 50, width: 50, color: Colors.green),
                    ]))

You can see that we have first defined a container with some height, width and a background color. Then we have passed Flutter stack widget as a child to it. Finally, we have specified another container widget inside stack widget.

Now let’s see how to change the position of that container that is passed as a child to the stack widget.

For that, we have to wrap that container with a Flutter positioned widget. See below code:

 Positioned(
    child: Container(
       height: 50, width: 50, color: Colors.green))

Let’s now use the constructors of Flutter positioned widget. We will customize the position of this container using these constructors.

Flutter Positioned Widget Constructors

Its constructors are listed below:

top
left
right
bottom
height
width

Top Constructor

It is used to specify the position of the child widget using the top border of its parent. See below code:

 Positioned(
             top: 20,
                 child: Container(
                  height: 50, width: 50, color: Colors.green))

The greater the value, the more distance it will have from the top and vice versa.

Left Constructor

It will specify the distance from the left border of its parent widget. See below code

 Positioned(
      left: 20,
        child: Container(
        height: 50, width: 50, color: Colors.green))

Right Constructor

It specifies the distance/space from the right. See code below:

 Positioned(
      right: 20,
        child: Container(
        height: 50, width: 50, color: Colors.green))

Bottom Constructor

It’s used to give space from the bottom border of the parent widget. See below code:

 Positioned(
      bottom: 20,
        child: Container(
        height: 50, width: 50, color: Colors.green))

Height and Width Constructors

These are used to specify the height and width of its child widget. See below code:

 Positioned(
     height: 30, width:80
        child: Container(color: Colors.green))

So you can use the Flutter positioned widget to specify the exact position of your widget.

I hope you now have a proper idea of how to use and customize Flutter positioned widget. I also have implemented a more customized example which is available in the below section. Don’t hesitate to ask if you still have any questions related to Flutter positioned widget. I’d love to answer all.

The complete source code is give below in which Flutter positioned widget is implemented and properly customized.

Customized Flutter Positioned Widget Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Container(
                    height: 200,
                    width: 200,
                    decoration: BoxDecoration(color: Colors.white, boxShadow: [
                      BoxShadow(
                          spreadRadius: 1, blurRadius: 5, color: Colors.black12)
                    ]),
                    child: Stack(children: [
                      Positioned(
                          height: 50,
                          width: 50,
                          right: 20,
                          top: 50,
                          child: Container(
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.blue),
                          )),
                      Positioned(
                          height: 40,
                          width: 40,
                          right: 50,
                          top: 70,
                          child: Container(
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.green),
                          )),
                      Positioned(
                          height: 40,
                          width: 40,
                          left: 50,
                          top: 70,
                          child: Container(
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.purple),
                          )),
                      Positioned(
                          height: 80,
                          width: 80,
                          left: 30,
                          bottom: 20,
                          child: Container(
                            decoration: BoxDecoration(
                                shape: BoxShape.circle, color: Colors.grey),
                          ))
                    ])))));
  }
}

Conclusion

To conclude, we have used multiple examples to properly demonstrate how to use and customize Flutter positioned widget. Hope you now have learnt how to properly use it. I’d be very happy to have your comments on this post. Thank you for reading this Flutter post.

How To Easily Use Flutter Positioned Widget – Example Code