Positioned Widget in Flutter

Used to position child widgets in Stack widget.

 

Positioned Widget

 

  • top
  • bottom
  • height
  • left
  • right
  • width

 

Example 1:

 

import 'dart:html';


import 'package:flutter/material.dart';


void main() => DemoApp();


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  final item = List<String>.generate(30, (i) => 'Item $i');

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text("Demo App"),

        ),

        body: Center(

          child: Container(

            child: Stack(

              clipBehavior: Clip.none,

              children: [

                Container(

                  height: 200,

                  width: 200,

                  color: Colors.limeAccent,

                ),

                Positioned(

                  top: -50, right: -65,

                  child: Container(

                    height: 50,

                    width: 50,

                    color: Colors.blueAccent,

                  ),

                ),

              ],

            ),

          ),

        ),

      ),

    );

  }

}

 

Example 2:

 

Positioned(

                  top: 2,

                  right: 4,

                  bottom: 6,

                  left: 8,

                  child: Container(

                    height: 50,

                    width: 50,

                    color: Colors.blueAccent,

                  ),

                ),


Video Link:

Post a Comment (0)
Previous Post Next Post