How to use the positioned widget in Flutter
The Positioned widget is a layout widget in Flutter that helps us position child widgets within a Stack widget. It allows us to specify the exact coordinates (top, left, right, bottom) of a child widget relative to the Stack's edges. This is particularly useful for creating custom designs and layouts.
Constructor and parameters
The Positioned widget provides a constructor with various parameters to customize its behavior and layout.
const Positioned({
Key? key,
double? left,
double? top,
double? right,
double? bottom,
double? width,
double? height,
required Widget child
})
Let's take a closer look at each parameter and its purpose.
key: A unique identifier for the widget, used for widget management.left: Distance from the left edge of theStack.top: Distance from the top edge of theStack.right: Distance from the right edge of theStack.bottom: Distance from the bottom edge of theStack.width: Optional width for the positioned widget.height: Optional height for the positioned widget.child: The child widget is to be positioned within theStack.
Implementation
We can follow the instructions given below to add a Positioned widget in UI.
Import the necessary packages
To use the Positioned widget, we need to import the necessary packages in our Dart file.
import 'package:flutter/material.dart';
Basic syntax
The basic syntax of using the Positioned widget is as follows:
Positioned(top: /* value */,left: /* value */,right: /* value */,bottom: /* value */,child: /* Your Widget */,)
Positioning widgets within a Stack
To use the Positioned widget, we'll typically need to place it as a child of a Stack widget. The Stack widget allows us to overlay multiple widgets on top of each other. The Positioned widget then determines the exact position of its child within the Stack.
Stack(children: [/* Other Widgets */,Positioned(top: /* value */,left: /* value */,child: /* Your Widget */,),],)
Applying the FractionalOffset for relative positioning
We can use the FractionalOffset to position a child widget relative to the size of the Stack. This is useful for achieving responsive layouts.
Stack(children: [Positioned(top: null,left: null,right: 0.0,bottom: 0.0,child: Container(width: 50,height: 50,color: Colors.green,),),],)
Code example
We get the following code by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Educative Positioned Answer')),
body: PositionedExample(),
),
);
}
}
class PositionedExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
color: Colors.grey[300],
width: double.infinity,
height: double.infinity,
),
Positioned(
top: 20,
left: 20,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
Positioned(
top: 150,
right: 30,
child: Container(
width: 150,
height: 200,
color: Colors.red,
),
),
Positioned(
bottom: 20,
left: 50,
child: Container(
width: 80,
height: 120,
color: Colors.green,
),
),
Positioned(
bottom: 60,
right: 80,
child: Container(
width: 120,
height: 80,
color: Colors.orange,
),
),
],
);
}
}
After running the above code, we can see the following output:
