flutter - showDialog's barrierDismissible ignored in ios? - flutter

in android, when you tap on the "barrier"/outside/background of a (material) modal dialog created using showDialog(), the dialog closes by default.
when you tap on that barrier on an iphone (physical device), the tap to close is ignored and the modal stays open.
i realize there is a "showCupertinoDialog" option, but i am trying to avoid using it (it doesn't tap-barrier-to-close either).
the flutter/dart documentation doesn't indicate any differences in expected behavior of android -vs- ios. i've included some example code that illustrates the issue, i would expect the _showMaterialDialog() dialog to close on iphones, but it does not.
any idea why this is not working? is this a bug or expected behavior? Thanks!
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class dialogtest extends StatefulWidget {
#override
dialogtestState createState() => dialogtestState();
}
class dialogtestState extends State<dialogtest> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Dialog Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showMaterialDialog();
},
child: Text('Show Material Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showCupertinoDialog();
},
child: Text('Show Cupertino Dialog'),
),
],
),
)));
}
void _showMaterialDialog() {
showDialog(
context: context,
barrierDismissible: true, // ********* ignored in ios, defaults to true anyway!!
builder: (context) {
return AlertDialog(
title: Text('Material Dialog'),
content: Text('This is the content of the material dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
_dismissDialog() {
Navigator.pop(context);
}
void _showCupertinoDialog() {
showDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Cupertino Dialog'),
content: Text('This is the content of the cupertino dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
}

i figured it out in case anyone runs into this behavior randomly.
i was using flutter 1.7 (and working with android only) when I created the project. in order to support "unfocusing" of a text field when tapping outside of it, i wrapped the whole project in a GestureDetector with the instructions from here:
https://flutter360.dev/dismiss-keyboard-form-lose-focus
Everything worked perfectly. When I moved the app to a mac for iOS testing, i did a new install of flutter which came with v1.9.1+hotfix.6. I guess something in flutter changed from 1.7 -> 1.9.1 which breaks this unsupported implementation. not considering the difference between my windows/android flutter version (where it worked) to my mac/ios version (where it did not work), i assumed it was an iOS thing. Once I upgraded flutter on my PC to 1.9.1 the dialogs were no longer dismissible on my android phone.
I still need/want a way to tap-to-dismiss the keyboard from a text field. I am trying out the Listener solution from here which seems to be working as expected so far:
Flutter. A way for TextField to detect tap outside
I guess this is an exercise in side-effects of creative solutions to functionality not provided out of box by the framework coupled with understanding the impacts of updating the framework.

Related

Flutter Modal Bottom Sheet with Navigator does not pop as expected

I a working with ModalBottomSheet and I love the package. However I am encountering an issue when trying to navigate with in a ModalBottomSheet.
Here is a ScreenVideo for a better understanding.
As you can see the View is presented as a ModalBottomSheet. But when popping it, it is not simply dismissing to the bottom but instead it is popping to some empty screen with a MaterialPage Pop animation.
I changed my code so I can push with a MaterialPageRoute-Animation inside that ModalBottomSheet. Before that everything was working as expected.
Here is my Page:
class _AboutScreenState extends State<AboutScreen> {
#override
Widget build(BuildContext context) {
return Material(
color: AppColors.primary,
child: Navigator(
onGenerateRoute: (settings) => MaterialPageRoute(
builder: (context2) => Builder(
builder: (context) => CupertinoPageScaffold(
backgroundColor: AppColors.secondary,
resizeToAvoidBottomInset: false,
child: SafeArea(
child: Padding(
padding: EdgeInsets.all(sidePadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButtonWithExpandedTouchTarget(
onTapped: () {
Navigator.pop(context);
},
svgPath: 'assets/icons/down.svg',
),
],
),
Text(
'About',
style: AppTextStyles.montserratH2SemiBold,
),
...
RoundedCornersTextButton(
title: 'Impressum',
onTap: () {
Navigator.pop(context);
},
textColor: AppColors.primary,
backgroundColor: AppColors.secondary,
borderColor: AppColors.primary,
),
],
),
),
)),
),
),
),
);
}
}
I was simply following this example. What am I missing here? With the code above I can push inside the ModalSheet as expected with a MaterialPageRoute Animation but popping the first screen brings up the issue...
Let me know if you need any more info! Any help is appreciated :)
I think you are popping with the wrong context. The example is popping with rootContext, which is from the top-most widget in the hierarchy. You are popping from with context, defined at your lowest builder in the hierarchy.
I believe you are using the incorrect context. rootContext, which is from the top-most widget in the hierarchy, is what makes the sample pop. You're popping from your lowest builder in the hierarchy, which is dictated by context.

Searching for the name of a specific menu - Flutter

So I'm searching for a Menu often found in a Settings Screen. It's used to select a Setting.
It opens when you press on a ListTile and then it fills the mayority of the Screen, while the borders are transparent. In the menu you have to select one of the options.
An example usecase of that would be to select a Language(onTap of the ListTile opens a Menu where you can select between all the avaliable languages)
It is similar to that of a PopupMenuButton, however as already mentioned it fills most of the screen, and the individual selectable items have a radiobutton in front of the text(probably RadioListTiles)
I hope someone gets what I'm talking about, because for the past 3 hours I'm searching for this widget but just find articles about the PopupMenuButton over and over.
Edit: I finally found an app that uses the feature I'm looking for
: https://imgur.com/a/A9k71io
By clicking on the first ListTile in the first Picture, the dialog in the second picture opens up.
Hopefully this custom widget is something roughly what you want, try to copy and paste it in your project and play with it.
this is made using the Dialog widget, to exit the Dialog you can tap out of it/ press the device back arrow and I added a small back icon on the top left corner.
tell me if it helped :)
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;// the device size
return Scaffold(
body: Center(
child: ListTile(
tileColor: Colors.grey[300],
title: Text(
'Language',
style: TextStyle(fontSize: 25),
),
onTap: () => showDialog(
context: context,
builder: (context) => Dialog(
insetPadding: EdgeInsets.all(20),
child: Container(
color: Colors.white,
height: deviceSize.height,
width: deviceSize.width,
child: Column(
children: [
Row(
children: [
IconButton(
color: Colors.red,
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.of(context).pop(),
),
],
),
Spacer(),
Text('Pick A Language'),
Spacer(),
],
),
),
),
),
),
),
);
}
}

How to transition to a new screen instantly

I want to create a transition immediately from one screen to another (no animation). However isInitialRoute generates an error due to an update to the Router widget. The suggestion is to use onGenerateInitialRoutes but I am not sure how to implement it.
The flutter design doc recommends this:
Routes & RouteSettings
Currently, the only way to add a Route to the history stack without playing its entrance animation is to mark it as an initial route in its RouteSettings. The declarative API requires that routes can be added without animation at any time. This is useful when the route is covered by another route and playing the animation simply doesn't make sense. To support this, a didAdd method is added to the Route interface. This method is called by the Navigator instead of didPush when the Route should just be added without its regular entrance animation. To simplify things, this new method will also be used to bring the initial route on screen. This makes the RouteSettings.initialRoute parameter useless and it will be removed from RouteSettings. This is a minor breaking change.
This is the code that is generating the error on isInitialRoute:
import 'package:flutter/cupertino.dart'
show
CupertinoApp,
CupertinoButton,
CupertinoPageRoute,
CupertinoPageScaffold;
import 'package:flutter/widgets.dart'
show
BuildContext,
Center,
Column,
Navigator,
Route,
RouteSettings,
SafeArea,
Spacer,
Text,
runApp,
Widget;
Widget makeButton(BuildContext context, String routeName) =>
new CupertinoButton(
onPressed: () => Navigator.pushReplacementNamed(context, routeName),
child: Text('Go to \'$routeName\''),
);
Route generateRoute(RouteSettings settings) {
switch (settings.name) {
case 'not-animated':
return new CupertinoPageRoute(
settings: RouteSettings(name: settings.name, isInitialRoute: true),
builder: (context) => CupertinoPageScaffold(
child: SafeArea(
child: Center(
child: Column(
children: [
Spacer(),
Text('This is \'not-animated\''),
makeButton(context, 'animated'),
Spacer(),
],
),
),
),
),
);
default:
return null;
}
}
void main() {
runApp(
CupertinoApp(
onGenerateRoute: generateRoute,
initialRoute: 'animated',
routes: {
'animated': (context) => CupertinoPageScaffold(
child: SafeArea(
child: Center(
child: Column(
children: [
Spacer(),
Text('This is \'animated\''),
makeButton(context, 'not-animated'),
Spacer(),
],
),
),
),
),
},
),
);
}
If You Want to just navigate your screen add this to your code
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => yoursecondscreenname()),
);
},

Navigator gets the wrong context

I have a flutter application which shows a camera, then scans a qr-code using git://github.com/arashbi/flutter_qrcode_reader and on the call back, I want to navigate to another screen to show the information I get from some query. The problem is, it seems Navigator get a wrong context, so instead of full page navigation, I see the second page pushed inside my first page as a widget.
The build of first page is as follow :
#override
Widget build(BuildContext context) {
Widget main =
new Scaffold(
appBar: _buildAppBar(),
body: Column(
children: <Widget>[
_eventButton ?? new Text(""),
new Center(
child: new Text("Hi"))
],
),
floatingActionButton: new FloatingActionButton(
onPressed:
() {
new QRCodeReader()
.setAutoFocusIntervalInMs(200)
.setForceAutoFocus(true)
.setTorchEnabled(true)
.setHandlePermissions(true)
.setExecuteAfterPermissionGranted(true)
.scan().then((barcode) => _showTicketPage(barcode));
}
,
child: new Icon(Icons.check),
),
);
if (!_loading) {
return main;
} else {
return new Stack(
children: [main,
new Container(
decoration: new BoxDecoration(
color: Color.fromRGBO(220, 220, 220,
0.3) // Specifies the background color and the opacity
),
child: new Center(child: new CircularProgressIndicator(),))
]
);
}
}
The 'Hi' Widget is for debugging, and the navigate method is
void _showTicketPage(var barcode) {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) => TicketScreen(barcode)));
}
After getting the barcode, the second screen - TicketScreen - is pushed under 'Hi' Widget. I didn't even know this was possible to do.
I tried to get the context of the screen, save it to a field var, but that didn't help either.
How can I fix it? I ran out of ideas.

Flutter - click one RaisedButton and all RaisedButtons update

I am working on a calculator type app that has a lot of buttons on the screen. When I turn on dev tools to check repainting, I noticed that whenever one button is clicked, every button on the screen repaints. Instead of pasting tons of code in here, I created a demo app that shows what it is that I am doing. This is what the screen looks like:
Whenever any of the buttons are pressed, every button on the screen redraws.
This is the code that I'm using:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button Testing'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
buttonPressed,
textAlign: TextAlign.center,
),
SizedBox(
height: 10.0,
),
RaisedButton(
child: Text('Button One'),
onPressed: () {
setState(() {
buttonPressed = 'Button One Was Pressed';
});
},
),
RaisedButton(
child: Text('Button Two'),
onPressed: () {
setState(() {
buttonPressed = 'Button Two Was Pressed';
});
},
),
RaisedButton(
child: Text('Button Three'),
onPressed: () {
setState(() {
buttonPressed = 'Button Three Was Pressed';
});
},
),
RaisedButton(
child: Text('Button Four'),
onPressed: () {
setState(() {
buttonPressed = 'Button Four Was Pressed';
});
},
),
],
),
),
),
);
}
I've tried breaking the button area out into a separate widget and nothing I've done matters. My question is, is there something else that I should be doing? Is this expected and acceptable behavior? Does it even matter that everything is redrawing whenever any buttons are tapped? I thought that in Flutter, only the things that needed to be redrawn were redrawn.
Whenever you call setState then it rebuild whole build method, so it is obvious that it rebuild RaisedButton.
You can avoid by using provider, Bloc and so on which will not rebuild whole build method. It will only change data.
It is totally depends on you that you want to accept it or not. If widget is not that much big than you can keep it according to me.
Redrawing widget every time is really not good practice but if it is not rebuilding very frequently or your application is not that much big then it is fine.
setState will rebuild all the screen ,
So you can avoid that by using Bloc it is a state controller which won't rebuild everything only what you need to rebuild you can use it from scratch or use the plugin bloc 1.0.0