Stack (Flutter Widget of the Week)
Why Stack Overflow recommends it
Stack Overflow users link it when answering Flutter layout questions that need overlapping widgets, such as overlaying buttons, text, or a spinner on top of other content.
Recommended by 6 people across 6 different months, 2019 to 2022.
What it is
A 78-second Flutter Widget of the Week episode from the official Flutter channel explaining the Stack widget, which overlays multiple widgets on top of each other, such as text over an image. It links to previous episodes on Align and Positioned and to the official docs.
What people said
Recommends Mario Niemand · 2020-08 · Stack Overflow · on “Adjust height of a container based on content”
Your best bet is to use the stack widget instead of containers because you can set the stacks to overlap and thus having little to no margin. See the video below for how a stack works: [this video] Hope this fixes your problem :D
Recommends Patrick Freitas · 2020-09 · Stack Overflow · on “Overlap two buttons Flutter”
Based on Flutter Oficial Documentation [LINK] , you can use the Stack widget to achieve this effect. Here [this video] is a quick tutorial about this widget. Using RaisedButton [LINK] , always remember to remove the elevation from the upper buttons, to not cause a black overlay impression. Here is a example: Stack( children: <Widget>[ RaisedButton( onPressed: () => {}, color: Colors.red, child: Text('First'), ), RaisedButton( onPressed: () => {}, color: Colors.transparent, elevation: 0, child: Text('Second'), ), ], ) Here is the result [LINK] .
Recommends Nedim Karavdic · 2021-03 · Stack Overflow · on “Put two buttons on top of an image”
It can be achieved using Stack widget. Make sure to follow official Flutter guide on Stack widget in the video down below: [this video]
Recommends m123 · 2021-04 · Stack Overflow · on “Flutter vertical slider”
For this you can use the Slider [LINK] / Widget of the Week video [LINK] double _currentSliderValue = 20; return Slider( value: _currentSliderValue, min: 0, max: 100, divisions: 5, label: _currentSliderValue.round().toString(), onChanged: (double value) { setState(() { _currentSliderValue = value; }); }, ); The only problem left is the rotation, for this you can wrap the Slider inside a RotatedBox [LINK] RotatedBox( quarterTurns: 3, child: YOURSLIVER ) In the gif you provided it looks like as if your sliver should be over some other Widgets. To achive this you can use Stack [LINK] / Widget of the Week [this video] or when displaying on top of the whole page you can use a invisible ModalBottomShee
Recommends MindStudio · 2022-09 · Stack Overflow · on “Animated Container over the contents of another flutter container”
Yes you have to use a Stack: Columns and Rows only put UI elements next to each other. Stack( children: [ BottomWidget(), MiddleWidget(), TopWidget(), ] ), If you want your TopWidget to also be at the top of the screen wrap it with an Align widget. In your case replace TopWidget() with whatever you want to be on top (probably the blue container). Also watch this 1 min video about the Stack widget: Stack - Flutter [this video] .
Recommends Khyati Modi · 2022-12 · Stack Overflow · on “can I add more widget inside the image on flutter?”
Yes, You have to use Stack [this video] widget for that. Initial one has your image and for textField you can add widget with Position.
Cites Aakash Kumar · 2019-09 · Stack Overflow · on “How to make a bottom bar with border radius using Card and add elevation to it in Flutter?”
& 3. You don't actually need card widget for this. You can add shadow on your container itself. You have to use stack to achieve this. As I am hoping you are using the same code as my previous answer of your another question. I have updated the answer with stack layout & your requirements Container( child: Stack( fit: StackFit.expand, children: <Widget>[ Positioned.fill( child: Container( color: Colors.blue, alignment: Alignment.center, child: Text("Hello"), ), ), Align( alignment: Alignment.bottomCenter, child: Container( height: 50, width: double.maxFinite, decoration: BoxDecoration( boxShadow: [ new BoxShadow( color: Colors.black, blurRadius: 2.0, ), ], color: Colors.yellow, borderRadius:
Cites Ciprian · 2020-01 · Stack Overflow · on “Flutter: How to put button on each image like (x) to cancel selected image”
You can try using Stack [this video] return Stack( children: <Widget>[ AssetThumb( asset: asset, width: 300, height: 300, ), Positioned( top: 0, right: 0, child: GestureDetector( onTap: (){ print('delete image from List'); setState((){ print('set new state of images'); }) }, child: Icon( Icons.delete, ), ), ), ], );
Cites SrilalS · 2020-05 · Stack Overflow · on “Flutter how can I create a 3 layer stack”
Try Using 'Stack' widget. Its Similar to a Column but its Stacks its children on top of each other. its featured on Flutter Widget of the Week in Here [this video] Read the Usage in Here [LINK]
Cites TheMisir · 2020-07 · Stack Overflow · on “How to create Flutter Custom App Bar Floating Style with Radius Corners?”
You can use Stack [LINK] widget to display a widget on top of another widget (page content in your example). So use Stack [LINK] to place search / app bar on top of main app content and customize as your needs. You can check this youtube video [this video] to learn more about Stack widget. Here's sample code, you can place inside Scaffold . Stack( children: <Widget>[ // this will be filled entire screen Positioned.fill(child: Image.network(' [LINK] ')), // this will be placed top of the screen with 15 points distance Positioned( top: 15, left: 15, right: 15, // using SafeArea to avoid device frames (for example notch in iPhones) child: SafeArea( child: Container( height: 50, decoration: BoxDecora