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.
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.
How can I change the color of a ButtonBar in Flutter? There isn't a color in ButtonBarTheme as far as I can tell. I am trying to do something like this:
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// Somehow get the color of these buttons different to backgroundColor
persistentFooterButtons: _buildTextButtons(),
);
The best I can think of at the moment is to somehow reimplement the persistent footer buttons myself, but that is ugly. The problem seems to be that the Scaffold backgroundColor property is used in multiple places, yet is defined in a single widget. This means I can't wrap it in a Theme and override it piecemeal either, as far as I can tell.
Oh, I might have found an answer. I had been using both the bottomNavigationBar and the persistentFooterButtons. persistentFooterButtons are wrapped in a ButtonBar, which appears to limit your styling options.
bottomNavigationBar is a single widget, though, so you can fiddle with it. I switched to just build my own persistentFooterButtons after all.
(I had to edit this from my app, so it might not be copy/paste ready.)
Widget _buildNavigationBar(BuildContext ctx, Color barColor) {
List<Widget> actions = [
// We need the first element to be big, to push everything to the right.
Expanded(
child: Container(),
),
];
actions.addAll(_buildTextButtons(ctx));
Widget actionContainer = ColoredBox(
color: barColor,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: actions,
),
),
);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
actionContainer,
// I use this to make space for ads.
Container(
color: barColor,
height: 50,
),
],
);
}
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// removed this persistentFooterButtons: _buildTextButtons(),
// and replaced with this:
bottomNavigationBar: _buildNavigationBar(ctx),
);
you can also wrap that ButtonBar into Container and After that, you can make any type of changes to that ButtonBar, like coloring etc
I'm making an app with Flutter, and I found a weird behaviour that I got to reproduce in a small demo: https://pastebin.com/ZJd2fnHK
The objective is to have a TextField that when in focus should select the whole text. I achieved this with a FocusNode.
Everything was working fine, until I set a Dismissible widget to remove items from a list. For some reason (probably drawing ones) the whole page has a rebuild and the focusnode state is lost.
It's very interesting since the issue only happens when the widget is within a page that has being pushed by the navigator. The same Widget works fine in the root Page.
The Widget is the following:
Widget build(BuildContext context) {
textControllerA.text = "Hello";
textControllerB.text = "World";
return Column(children: [
Dismissible(
key: Key("potatoes"),
onDismissed: (direction) {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
child: TextField(
focusNode: focusNodeA,
controller: textControllerA,
),
padding: EdgeInsets.all(20),
),
],
),
),
Padding(
child: TextField(
focusNode: focusNodeB,
controller: textControllerB,
),
padding: EdgeInsets.all(20),
),
]);
}
Maybe I should try to store the focus' state in state, but that'd have some overhead. Or maybe (possibly) I'm doing something very wrong, in which case I would love to have some guidance.
Cheers
You should use StatefulWidget and call setState
onDismissed: (direccion) {
setState(() {
...
});