How do I this bottom bar menu in Flutter?
bottom menu hidden
bottom menu opened
There is a bar at bottom and when tapped, the bar is opened with a list and a button
You can use BottomSheet here's example :
void _modalBottomSheetMenu(BuildContext context){
showModalBottomSheet(
context: context,
builder: (builder){
return ListView(
children: [
ListTile(
leading: CircleAvatar(),
title: Text("John Doe"),
subtitle: Text("Nearby"),
),
RaisedButton(child: Text("Button"), onPressed: () => print("Pressed"))
]
);
}
);
}
For more information Flutter Documentation , Medium Guide
Identify status e.g. isExpanded
then display your cells(Widgets) based on that. Either you can use Visibility widget,
Visibility(
visible: (isExpanded),
child: Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),
)
Or you can just use a condition like,
if (a == b)
Row(
children: <Widget>[
Image.asset('yourImage')
Text("some text"),
],
),
Related
I developed a flutter web application that has google map widget as a part of Scaffold body. I use flutter_speed_dial as a floating action button. When I click on SpeedDial, it shows an overlay on whole screen, but the map is still clickable.
I know it is happened because google map use HtmlElementView in web and we have a pointer_interceptor package to prevent triggering map when click on above buttons. But how about the overlays? there is no place to wrap SpeedDial overlay with pointer_interceptor.
Here is my sample code:
Scaffold(
...
body: Column(
children: [
...
SizedBox(
height: 230,
child: GoogleMap(...)),
...
]
),
floatingActionButton: PointerInterceptor(
child: SpeedDial(
...
childPadding: const EdgeInsets.all(5),
spaceBetweenChildren: 1,
isOpenOnStart: false,
children: [
SpeedDialChild(
onTap: () {
...
},
labelWidget: PointerInterceptor(
child: Card(
...
),
),
),
],
),
),
)
I believe you can Solve your problem by using IgnorePointer.
Wrap a widget with IgnorePointer and set it to true.
IgnorePointer(
ignoring: true,
child: Widget _test(),
),
you can take a look at docs here:
https://api.flutter.dev/flutter/widgets/IgnorePointer-class.html
I'm using GetX package and I want to close and remove one dialog on my page.
Actually, I don't want to remove the snack bar or other things.
I just want to remove and close one special dialog.
Is there any way to do that?
This is my dialog with GetX package:
Get.dialog(
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Center(
child: Padding(
padding: EdgeInsets.all(50.0),
child: Center(
child: Loading(),
),
),
),
],
),
barrierDismissible: false,
),
And this is to remove my dialog:
Get.back();
You can use
if(Get.isDialogOpen){
Get.back();
}
else{
//whatever you want.
}
By using this you can close the dialog only without closing other widgets like snackbar our your route/widget.
I am new in flutter.
I am following some YouTube videos to learn flutter. After adding a picture in card(home screen) now I want to add two buttons below that picture. how can i do it.
the picture Adding code
body: Center(
child: Card(
child: Column(
children: [Image.asset("assets/image-name")],
),
),
),
Here you have a great page, where you can find implementations of basic material widgets in Flutter.
For your example, it would look like this:
body: Center(
child: Card(
child: Column(
children: [
Image.asset("assets/image-name"),
ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Text('CONTAINED BUTTON'),
)
],
),
),
),
For a second button, you can just add another one in the children array.
You can also wrap both buttons in Row widget, that will allow you to place them horizontally, next to each other.
Flutter Web
So I have a button called add tags which opens up a modal. The Modal has only one text field and two buttons called add another tag and submit.
Now what I want to do is when the user clicks the add another tag button the app will generate another text field.
I've already seen some videos and read the documentation but since I need to work on a modal and the modal has defined size I'm not sure how to handle issues like
What happens if the user adds a lot of tags. How can I make the modal scrollable?
I'm new to flutter_form_builder so I'm not sure if the modal can handle it or not.
Here's my code:
final _formKey = GlobalKey<FormBuilderState>();
Future buildAddTagsForm(BuildContext context,
{Function()? notifyParent}) async {
return await showDialog(
barrierDismissible: false,
barrierColor: Colors.black.withOpacity(0.5),
context: context,
builder: (context) {
var screen = MediaQuery.of(context).size;
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
content: SingleChildScrollView(
child: Container(
height: screen.height / 2,
width: screen.height > 650 ? 600.00 : screen.height * 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FormBuilder(
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.cancel_presentation_rounded,
),
),
],
),
SizedBox(
height: 10,
),
FormBuilderTextField(
name: 'Tag Name',
decoration: InputDecoration(labelText: 'Tag name'),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
]),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
color: CustomColors.buttonColor,
child: Text(
"Add another tag",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {},
)
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
color: CustomColors.buttonColor,
child: Text(
"Submit",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {},
)
],
),
],
),
),
),
),
),
);
},
);
},
);
}
I'm assuming by "modal" we're talking about the AlertDialog here:
return AlertDialog(
content: SingleChildScrollView(
By using SingleChildScrollView as the AlertDialog content:, we can have any size / any number of text fields we like in the dialog. If their number are too many for the height of dialog inside our screen, the content will scroll.
Although, its immediate child Container with height prevents the SingleChildScrollView from doing its magic:
return AlertDialog(
content: SingleChildScrollView(
child: Container(
height: screen.height / 2,
I think the above AlertDialog would not scroll because it would never be big enough to need to scroll. Plus, any fields added that combine to be taller than that specified height (screen.height / 2) will cause an overflow warning and be cutoff visually.
So to answer question #1: "What happens if the user adds a lot of tags. How can I make the modal scrollable?"
using SingleChildScrollView is the right idea
lets swap the position of the Container with height and the SingleChildScrollView and this should allow the dialog to grow & scroll as needed as columns in FormBuilder increase
Your question #2: "I'm new to flutter_form_builder so I'm not sure if the modal can handle it or not."
flutter_form_builder shouldn't affect how SingleChildScrollView works
Example
Here's a partial example of an AlertDialog with scroll view content: that can grow in number.
Widget build(BuildContext context) {
return Container(
height: 300,
child: AlertDialog(
content: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: items,
),
),
),
actions: [
OutlinedButton(
child: Text('Add Row'),
onPressed: _incrementCounter
)
]
),
);
}
The complete example runnable in DartPard is here. (Add a 6 or 7 rows and then scroll the content.)
Warning
There's a gotcha with using the above AlertDialog inside a sized Container. That Container with height is not enough to constrain the AlertDialog size.
Your showDialog builder: (that pushes the AlertDialog into existence) must provide additional constraints in order for the sized Container to have constraints to size itself within. Without these constraints, the AlertDialog will grow until it matches the device viewport size. I believe this is a quirk with how showDialog is written, since I'm guessing it's a modal layer on top of the current stack of routes. (Someone can correct me if I'm wrong.) It's only constraint is the physical device, but nothing else. By wrapping builder:'s output with a constraining widget (such as Center) the output will be able to size itself.
To see this in action, remove the Center widget from the full example above an re-run it. The dialog will grow to fill the screen when adding rows instead of being at max 300px in height.
child: OutlinedButton(
child: Text('Open Dialog'),
onPressed: () => showDialog(
context: context,
builder: (context) => Center(child: MyDialog())
),
)
I am using animated icons in my FloatingActionButton (FAB) at bottom navigation bar. But FAB overlapping any page or dialogue open from the BottomAppBar, how can I resolve this?
When I open a new page with Navigator.push, Navigator.pushNamed, modalBottomSheet or a dialogue, the fab overlapping them.
Only works when I use pushReplacementNamed to open a new page.
How can I show the modalSheet without the fab on it and a page using just pushNamed?
I use this reference.
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: _buildFab(context, model),
bottomNavigationBar: BottomAppBar(
color: CustomTheme.getThemeData(context).getAccentColor(),
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () => _showModal(),
),
IconButton(
icon: Icon(Icons.home),
onPressed: () => {},
),
],
),
),
This is my FAB
And this happen when a show the modal or any page
Please I need your help..
I don't know what else to do. :-(
If this is happening with the Modal bottom sheet then try to increase the elevation of the bottom sheet. Like this
showModalBottomSheet(context: context, builder: (context) {
return AddressChangeBottomSheet(
title: "Change Area",
showAddress: false,
cityAreaList: list, onAddressChangeSubmit: () {
mainBloc.fetchUpdatedUser();
});
}, elevation: 10.0)