Skip to content
0:00 / 0:00

#flutter#positioned-widget#stack-layout

Positioned (Flutter Widget of the Week)

Google for Developers

2.6M subscribers • 20 videos on Hallway

YouTube
  • Recommended by 2 people: 1 in engineering communities and 1 on Stack Overflow and its sister sites.
  • Made by the vendor. The company whose product it covers made or sponsored it.
  • May be out of date. Uploaded 7 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

332K views7 years ago2 recommendations

Mobile developmentFlutter and React Native

An explanation of how to use the Positioned widget to place children within a Stack in Flutter.

Use the Positioned widget to position Flutter widgets in a Stack. Wrap the Stack’s children with a Positioned widget and set the parameters (top, bottom, left, right, height, and width) to achieve your desired Stack layout. You can also use Positioned.fill to make the widget fill the Stack’s space. Positioned widget documentation → bit.ly/2GkijOf More info on Flutter layout widgets → bit.ly/2GfgBxw This video is also subtitled in Chinese, Indonesian, Italian, French, German, Japanese, Korean, Portuguese, and Spanish. Get more tips! → bit.ly/2B8M3vG Subscribe! → bit.ly/googledevs

Why it's here

2 people recommend this

What people say. Recommended as a quick explanation of using the Positioned widget for absolute positioning in Flutter.

Moments people linked to

u/PedroMassangoin r/FlutterDev • Recommends

Positioned (Flutter Widget of the Week)

monalisa717on Stack Overflow • Recommends

On “Flutter UI: Absolute positioned element with fixed height and 100% width”

…Between, children: [ ElevatedButton(child: Text('Previous'), onPressed: () => {}), ElevatedButton(child: Text('Next'), onPressed: () => {}), ], ), ), You can also achieve the same effect with Positioned.fill() (passing null or a value for properties you want to override. https://api.flutter.dev/flutter/widgets/Positioned/Positioned.fill.html link to this video Positioned.fill( top: null, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ ElevatedButton(child: Text('Previous'), onPressed: () => {}), ElevatedButton(child: Text('Next'), onPressed: () => {}), ], ), ),…
8View the answer