I'm learning Flutter and using the Shrine demo app ( https://codelabs.developers.google.com/codelabs/mdc-101-flutter/ ) they provide as a base for trying out other widgets.
I'm using the Shrine menu for navigation as an alternative to a Drawer.
I've got a few different routes/pages, and I want each to have their own FloatingActionButton that performs different functions on each of them, with no button on some of them, and maybe a BottomAppBar on some others.
In order to use a FloatingActionButton it needs to be passed as an argument to a Scaffold, but the Shrine Backdrop only has one Scaffold, which also holds the state for which menu option is selected.
If each page had its own Scaffold then this would be easy, but then I'd lose the cool menu that the Shrine app has.
How could I use the Shrine style menu with multiple different pages, each with their own unique FloatingActionButton or BottomAppBar?
Should I be moving menu state elsewhere? Should I somehow pass a button action from the child widget back up to the Backdrop's Scaffold (if so, how)? Should I give up and use a Drawer?
Instead of using the FloactingActionButton property in a Scaffold, you can position the button at the bottom right of your pages with the 'Positioned' widget in individual pages.
For example:
body: Stack( // must add Stack widget
chidren: <Widget> [
.
.
. // your other widgets on this page
.
Positioned(
right: 10,
bottom: 10,
child: FloatingActionButton(
onPressed: () => yourFunction,
),
child: Icon(Icons.add),
backgroundColor: Colors.red,
),
),
],
);
Hope this helps :)
Related
I want to show suggestion when cursor is on button or on some widget in flutter web
I share example how I want to show suggestion box but I don't know how to add suggestion box in flutter
You need to wrap widget with Tooltip see example.
flutter tooltip example
Try below code hope its help to you. Used Tooltip Widget
Refer Tooltip here
Test below code here
Tooltip(
message: "Managers",
child: ElevatedButton(
onPressed: () {},
child: Text('OK'),
),
),
Result Screen->
In addition to all the tooltip related recommendations, if they don't quite meet your requirements, there's OverlayEntry It allows to use any widget, but is not super easy to handle, so there's a couple packages out there that do some work with Overlays for you that you might consider.
https://pub.dev/packages/flutter_portal
https://pub.dev/packages/modals
To show overlay entry when hovering over some widget, wrap it with MouseRegion and use its onEnter and onExit methods to show and hide overlay
I want to prevent End Drawer from closing automatically by clicking outside because if the user accidentally clicks outside of drawer it closes the drawer which is not that great because user filling form or interacting with data in End drawer, I have a close button on the top right of drawer which helps users to close drawer but I do not want to close drawer automatically by outside click, pls help your help will be appreciated
I used the solution from here https://stackoverflow.com/a/71391819
For endDrawer you just need to add mainAxisAlignment.end in Row
return Scaffold(
...,
drawer: Container(
color: Colors.transparent,
child:
Row(mainAxisAlignment: MainAxisAlignment.end,
children: const [SizedBox(width: 304, child: DrawerMenu())])),
...
);
I have problem building one page with ListView and ExpansionTile.
I have DefaultTabController page, in one tab page I represent list of items.
When you reach end of this list there should be ExpansionTile, and when it openes it should appear another items list. Everything should be scroll-able and without height limitation (if it is possible).
Something like that:
Container(
child: Column(
children: [
Scrollbar(child: ListView.builder()),
ExpansionTile(children: [Scrollbar(child: ListView.builder())]
]
)
);
I have tried use Expanded Widget but received only errors. The main idea is for the page to be fully filled with items, and when reach the end, expand to another list and continue scrolling.
I am use Flutter for web for make website. I need make foreground scroll, but background not scroll like normal website. For example: codemagic.io .
I cannot use Scaffold background because I want use use CustomPainter for custom background.
I am try use Stack, but issue is I need Center Widgets in ScrollView, and if I do this then the CustomPainter is not start from top of page:
Stack(
children: <Widget>[
Center(
child: SingleChildScrollView(
child:
Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
Anyone know solution?
Thanks!
You have two stacks here and one is only holding one widget (basically pointless for what you want to do). Put a widget on the bottom index of that stack (0) and make it the size of its container. You could use LayoutBuilder to get the size of its parent widget. Then place the singlechildscrollview on top of that.
I need some help with a layout.
I need put some widgets inside a "Scrollview" but keep the buttoms in the bottom space of screen.
Image with a "Scrollview" with some textFields inside, and under de "Scrollview" a Rows containing two buttons
So if I change orientation the Layout will keep buttons at bottom and will scroll the widgets above.
How can I made it in flutter, I tried to use the Stack, Listview and others approaches, but i didn't have luck
Multiple ways. I recommend you either using a Scaffold or a Column:
If you are already using a Scaffold in your app, just add bottomNavigatorBar as a Parameter, your bar you want to have at the bottom in it and make sure the rest of your layout is located under it's body tag.
Otherwise you could use a Column:
Column(
children: <Widget> [
Expanded(child:ScrollView(..),),
yourBottomBar,
] )
Or Flutter also has a Positioned widget which you can use in combination with a Stack:
Stack(
children: [
// some stuff
Positioned(
bottom: 0,
child: yourBottomBar
),
],
)