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.
Related
I have an AlertDialog that I use as a settings window, when the user opens it, the Apply button is not active, I would like that when the settings change, the button becomes active and saves the changes. How can I do this?
showAlertDialogSettings(BuildContext context, state) {
Widget okButton = TextButton(
child: Text("Apply"),
onPressed: null,
);
Widget cancelButton = TextButton(
child: Text("Close"),
onPressed:() => Navigator.pop(context),
);
AlertDialog alert = AlertDialog(
title: Center(child: Text("Settings")),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Sound:'),
SwitchWidget(),
],),
SizedBox(
height: 48,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Difficulty:'),
Padding(
padding: const EdgeInsets.only(right: 5),
child: DropDownButtonSettingsWidget()
),
],),
),
],
),
actions: [
okButton,
cancelButton,
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return BackdropFilter (
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: alert );
},
);
}
You will need to maintain state of both the sound and the difficulty values (there are many ways to tackle this), though the simplest would be to split out the "body" of the AlertDialog to be a StatefulWidget to contain its state. From there, you can check whether values have changed and update the view state to enable the apply button.
It's highly recommended to not mix business logic with UI logic, so this widget shouldn't actually do any of the saving. Inputs can be encapsulated within a class, and then this class can be passed back via Navigator.of(context).pop(T) (where T is your value class, see docs) upon closing the dialog from the apply button callback.
// Input passed back via `pop(T)` can be retrieved via:
final input = await showDialog(MyAlertDialog());
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.
I have defined one button inside one StatelessWidget (This will have the bloc creation logic and injecting using bloc provider, ), on click of the button i am showing a dialog and passing the bloc instance to it, as shown in the code.
//EsignBloc is defined here in parent statelessWidget. Defined i.e. creating the bloc instance and passing through the BlocProvider. Removed the code for simplicity
//This listener will be called when Button defined inside statelessWidget will be clicked. this is responsible for showing the dialog.
void _onClickHere(
BuildContext context,
) {
final dialog = Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConstants.borderRadius),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: _GetSignUsingOtpView(),
);
showDialog(
context: context,
builder: (_) => BlocProvider<EsignBloc>(
create: (_) => BlocProvider.of<EsignBloc>(context), // passing already created bloc to dialog
child: WillPopScope(
onWillPop: () => Future.value(false),
child: dialog,
),
),
barrierDismissible: false,
);
}
Pasting some code of _GetSignUsingOtpView()
class _GetSignUsingOtpView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocBuilder<EsignBloc, EsignState>(builder: (context, state) {
return Container(
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(
AppConstants.borderRadius,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () => _closeDialog(context),
child: Padding(
padding: const EdgeInsets.only(top: 8.0, right: 8),
child: Icon(
Icons.cancel,
color: AppColor.primaryDark,
size: SizeConfig.safeBlockVertical * 2,
),
),
),
),
Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
PrimaryText(text: state.otp), // data does not change after closing and opeing dialog again
PrimaryText(text: state.remainingTime), // data does not change after closing and opeing dialog again
],
),
),
],
),
);
});
}
void _closeDialog(BuildContext context) {
Navigator.pop(context);
}
}
The problem that I am facing is whenever the dialog opens again after closing, it doesn't show the latest data from the bloc. The dialog just shows whatever previous data is in the bloc. Can someone point it out, where i am making the mistake?
The reason that your dialog is not showing new data is because you are creating a new instance of the bloc. Even though you say that you're not.
BlocProvider<EsignBloc>(
create: (_) => BlocProvider.of<EsignBloc>(context), // passing already created bloc to dialog
child: ...
In some cases, BlocProvider can be used to provide an existing cubit to a new portion of the widget tree. This will be most commonly used when an existing cubit needs to be made available to a new route. In this case, BlocProvider will not automatically close the cubit since it did not create it.
To not create a new instance, you need to use BlocProvider.value. You can read more about it here
BlocProvider.value(
value: BlocProvider.of<EsignBloc>(context),
child: ...,
);
Instead of creating a new instance, this will use the previous instance and provide it to the child widget and will NOT close the bloc when its done using it. This is handy for dialogs and navigation.
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"),
],
),
I am using Flutter. In the scaffold body I use
Overlay.of(context).insert(...)
to insert a login dialog.
However, when I try to select the username/password fields, no keyboard shows up.
When I use the login widget in the 'normal' tree, it works. Moving it in the overlay makes it so the keyboard does not show.
Am I missing something here? Shouldn't this just work?
You need wrap your widgets in a FocusScope like the following:
overlayEntry = OverlayEntry(builder: (context) {
FocusScope.of(context).setFirstFocus(focusScopeNode);
return Material(
child: FocusScope(
node: focusScopeNode,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(),
],
),
),
),
);
});
Overlay.of(context).insert(overlayEntry);
In fact, for a login page, I would just use the Navigator to push it in.