This question already has answers here:
How to write a double back button pressed to exit app using flutter
(14 answers)
Closed 3 years ago.
I'm new to flutter, and I saw many android apps can exit when double press back button.
The first time press back button, app shows a toast"press again to exit app". The following second press, app exits. Of course, the time between two press must be not long.
I used this code but its not working.Help me out from this.
Future<bool> _onWillPop() {
return showDialog(
context: ctx,
builder: (ctx) => new AlertDialog(
title: new Text('Confirm Exit?',
style: new TextStyle(color: Colors.black, fontSize: 20.0)),
content: new Text(
'Are you sure you want to exit the app? Tap \'Yes\' to exit \'No\' to cancel.'),
actions: <Widget>[
new FlatButton(
onPressed: () {
// this line exits the app.
SystemChannels.platform
.invokeMethod('SystemNavigator.pop');
},
child:
new Text('Yes', style: new TextStyle(fontSize: 18.0)),
),
new FlatButton(
onPressed: () => Navigator.pop(ctx), // this line dismisses the dialog
child: new Text('No', style: new TextStyle(fontSize: 18.0)),
)
],
),
) ??
true;
}
This is an example code: it is using - "fluttertoast" for showing a toast.
DateTime currentBackPressTime = DateTime.now();
Future<bool> onWillPop() {
DateTime now = DateTime.now();
if (now.difference(currentBackPressTime) > Duration(seconds: 2)) {
currentBackPressTime = now;
Fluttertoast.showToast(msg: 'Tap Again to Exit'); // you can use snackbar too here
return Future.value(false);
}
return Future.value(true);
}
Its work perfectly.
Future<bool> _onWillPop() {
return showDialog(
barrierDismissible: false,
context: ctx,
builder: (context) => new AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0)),
content: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.exit_to_app,
color: MyColor.PrimaryColor,
size: 25.0,
),
SizedBox(width: 8.0),
Expanded(
child: Text(
"Do you want to exit this App",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17.0,
color: Colors.black),
),
),
],
),
actions: <Widget>[
new FlatButton(
onPressed: ()
{
Navigator.of(context).pop(false); },
child: new Text('No',style: TextStyle(color: MyColor.PrimaryColor,fontSize: 17.0)),
),
new FlatButton(
onPressed: () {
Navigator.pop(context,true);
Navigator.of(context).pop(true);},
child: new Text('Yes',style: TextStyle(color:MyColor.PrimaryColor,fontSize: 17.0)),
),
],
),
) ?? false;
}
I create a Flutter Form and I build a dropdown button with flutter. I am losing local son data into dropdown. Some of my items in dropdown button is long. I use SafeArea and ListView and I am getting overflow on right.
partial solution not mentioned in the other question, and I get the answer here.
Any idea how to fix it?
// TODO: BUILD RUN
return new Scaffold(
key: _scaffoldKey,
body: new SafeArea(
top: false,
bottom: false,
child: new Form(
key: _formKey,
child: new ListView(
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 32.0),
children: <Widget>[
//TODO: CURRENCY
new FormField<String>(
builder: (FormFieldState<String> state) {
return InputDecorator(
decoration: InputDecoration(
labelText: 'CHOOSE CURRENCY',
labelStyle: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.green.shade700),
errorText: state.hasError ? state.errorText : null,
),
isEmpty: _mySelectedCurrency == '',
child: new DropdownButtonHideUnderline(
child: new DropdownButton<String>(
style: TextStyle(
fontSize: 14.0,
color: Colors.black,
fontWeight: FontWeight.w500,
),
value: _mySelectedCurrency,
isDense: true,
onChanged: (String newValue) {
setState(() {
_mySelectedCurrency = newValue;
state.didChange(newValue);
});
},
items: _itemsName,
),
),
);
},
validator: (val) {
return val != '' ? null : 'Choose Currency...';
},
),
],
))));
Though I have flagged the question as possible duplicate, a partial solution not mentioned in the other question is to use the isExpanded property for DropDownButton.
child: new DropdownButton<String>(
isExpanded: true,
...
In most cases, in addition to the expanded, it is also good to make it ellipsized.. steps 1 and 2. If it's not ellipsized it will make it wrap to next line and if the component doesn't support multiples lines it will truncated the text.
DropdownButton(
isExpanded: true, //Step 1
items: [
new DropdownMenuItem(
child: Text("Long text that overflow the size.. wrapped or ellipsized",
overflow: TextOverflow.ellipsis), //Step 2
),
],
onChanged: (val) { }
)
i am trying to use the whats new package in my flutter application but I change th version and nothing happens, i implemmented it in the initstate of the class like this .Is it right??:
void initState() {
super.initState();
WhatsNewPage(
title: Text(
"What's New",
textScaleFactor: 1.0,
textAlign: TextAlign.center,
style: TextStyle(
// Text Style Needed to Look like iOS 11
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
buttonText: Text(
'Continue',
textScaleFactor: 1.0,
style: TextStyle(
color: Colors.white,
),
),
items: <ListTile>[
ListTile(
leading: Icon(Icons.color_lens),
title: Text(
'Dark Theme',
textScaleFactor: 1.0,
), //Title is the only Required Item
subtitle: Text(
'Black and grey theme (Tap to Change)',
textScaleFactor: 1.0,
),
onTap: () {
// You Can Navigate to Locations in the App
Navigator.of(context).pop();
},
),
], //Required
home: HomePage(),
showNow: false,
showOnVersionChange: true,
);}
Ok, it seems like the documentation is not clear, you can use that widget inside your build method, like my example below, replace NewPage() widget by the widget you want use after user press 'continue'
class TestingPackage extends StatefulWidget {
#override
TestingPackageState createState() => TestingPackageState();
}
class TestingPackageState extends State<TestingPackage> {
double textScaleFactor = 1.0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: WhatsNewPage(
title: Text(
"What's New",
textScaleFactor: textScaleFactor,
textAlign: TextAlign.center,
style: TextStyle(
// Text Style Needed to Look like iOS 11
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
buttonText: Text(
'Continue',
textScaleFactor: textScaleFactor,
style: TextStyle(
color: Colors.white,
),
),
// Create a List of WhatsNewItem for use in the Whats New Page
// Create as many as you need, it will be scrollable
items: <ListTile>[
ListTile(
leading: Icon(Icons.color_lens),
title: Text(
'Dark Theme',
textScaleFactor: textScaleFactor,
), //Title is the only Required Item
subtitle: Text(
'Black and grey theme (Tap to Change)',
textScaleFactor: textScaleFactor,
),
onTap: () {
// You Can Navigate to Locations in the App
Navigator.of(context).pushNamed("/settings");
},
),
ListTile(
leading: Icon(Icons.map),
title: Text(
'Google Maps',
textScaleFactor: textScaleFactor,
),
subtitle: Text(
'Open Address Links in Google Maps instead of Apple Maps (Tap to Change)',
textScaleFactor: textScaleFactor,
),
onTap: () {
// You Can Navigate to Locations in the App
Navigator.of(context).pushNamed("/settings");
},
),
ListTile(
leading: Icon(Icons.person_outline),
title: Text(
'Loan Contacts Enhancements',
textScaleFactor: textScaleFactor,
),
subtitle: Text(
'Updated look for faster navigation',
textScaleFactor: textScaleFactor,
),
onTap: () {
WhatsNewPage.showDetailPopUp(
context,
'Info',
"Navigate to any loan then select the bottom right icon to go to the contacts. You can press the dropdown arrow for contact information.",
);
},
),
], //Required
home:
NewPage(), // Where the Button will Navigate (Usually the Login or Home Screen)
showNow:
false, // Show now regarless of version change (Useful for showing from the main menu)
showOnVersionChange:
true, //Show only if the version changes or the user reinstalls the app
),
);
}
}
class NewPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
child: Text("new page"),
),
);
}
}
I am pretty new to Flutter and Dart and I can't seem to find any hints for this particular topic. I am trying to put 3 RadioListTiles in a Row like so:
Row(
children: [
Expanded(
child:RadioListTile<GoalSelection>(
title: Text(
'Net',
style: Theme.of(context).textTheme.body1,
),
value: GoalSelection.net,
groupValue: _goalSelection,
onChanged: (GoalSelection value) {
setState(() {
_goalSelection = value;
});
},
),
),
Expanded(
child: RadioListTile<GoalSelection>(
title: Text(
'Gross',
style: Theme.of(context).textTheme.body1,
),
value: GoalSelection.gross,
groupValue: _goalSelection,
onChanged: (GoalSelection value) {
setState(() {
_goalSelection = value;
});
},
),
),
Expanded(
child: RadioListTile<GoalSelection>(
title: Text(
'Salary',
style: Theme.of(context).textTheme.body1,
),
value: GoalSelection.salary,
groupValue: _goalSelection,
onChanged: (GoalSelection value) {
setState(() {
_goalSelection = value;
});
},
),
),
],
),
The buttons layout fine, but there seems to be a lot of wasted space for the label. I put a screenshot of what it currently looks like below. I have tried wrapping the Expanded, the RadioListTile, and the Text in Padding widgets (all one at a time) to manually set the padding to 0, but it didn't do anything. I have also tried to change Expanded to Flexible even though I didn't think that would change anything. I am at a loss now. Is there any way to get this layout to work? I am kind of assuming it is something really dumb that I am doing.
You can use Radio + text widget instead of RadioListTile. For removing internal padding in Radio widget set:
Radio(
visualDensity: const VisualDensity(
horizontal: VisualDensity.minimumDensity,
vertical: VisualDensity.minimumDensity),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
.....
),
You can use a Radio and Text widget in a row. But the Radio also has the same padding problem. To remove the padding you can put the Radio as a child of a SizedBox.
eg:- SizedBox(height: 20, width: 20, child: Radio(.......))
RadioListTile is used with the purpose of taking the full width in a vertical scroll list.
If you don't want this behavior, don't use it. Use Radio instead.
just set contentPadding: EdgeInsets.zero
RadioListTile(contentPadding: EdgeInsets.zero)
We can control the padding of the RadioListTile using Flexible widget. As you want to arrange 3 RadioListTiles inside a Row Widget. Please try with the below code, it will work.
Row(
children: <Widget>[
Flexible(
fit: FlexFit.loose,
child:
RadioListTile(
title: const Text('hello'),
onChanged: (value) {
setState(() {});
},
),
),
Flexible(
fit: FlexFit.loose,
child:
RadioListTile(
title: const Text('Lafayette'),
onChanged: (value) {
setState(() {});
},
),
)
],
),
Do, let me know. Once you tried with the above code. If it resolved you problem, please accept my answer as useful and provide your valuable comments.
I got the same problem. You could try to customize with Radio, Text, InkWell, Padding.
class LabeledRadio extends StatelessWidget {
const LabeledRadio({
this.label,
this.padding,
this.groupValue,
this.value,
this.onChanged,
});
final String label;
final EdgeInsets padding;
final bool groupValue;
final bool value;
final Function onChanged;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if (value != groupValue)
onChanged(value);
},
child: Padding(
padding: padding,
child: Row(
children: <Widget>[
Radio<bool>(
groupValue: groupValue,
value: value,
onChanged: (bool newValue) {
onChanged(newValue);
},
),
Text(label),
],
),
),
);
}
}
// ...
bool _isRadioSelected = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <LabeledRadio>[
LabeledRadio(
label: 'This is the first label text',
padding: const EdgeInsets.symmetric(horizontal: 5.0),
value: true,
groupValue: _isRadioSelected,
onChanged: (bool newValue) {
setState(() {
_isRadioSelected = newValue;
});
},
),
LabeledRadio(
label: 'This is the second label text',
padding: const EdgeInsets.symmetric(horizontal: 5.0),
value: false,
groupValue: _isRadioSelected,
onChanged: (bool newValue) {
setState(() {
_isRadioSelected = newValue;
});
},
),
],
),
);
}
The documentation: https://api.flutter.dev/flutter/material/RadioListTile-class.html#material.RadioListTile.3
This is how I fix the padding:
enum ContactSex { nam, nu, khac }
class CreateContactScreen extends StatefulWidget {
static const routeName = './create_contact';
#override
_CreateContactScreenState createState() => _CreateContactScreenState();
}
class _CreateContactScreenState extends State<CreateContactScreen> {
ContactSex _contaxtSex = ContactSex.nu;
final _form = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'TẠO LIÊN HỆ',
style: kHeaderTextStyle,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('XONG', style: TextStyle(color: Colors.white),),
)
],
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Form(
key: _form,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Tên*',
),
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
// TODO: when submit this text field
},
validator: (value) {
if (value.isEmpty) {
return 'Hãy nhập tên cho liên hệ.';
}
return null;
},
onSaved: (value) {
// TODO : when save the whole form
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Họ',
),
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
// TODO: when submit this text field
},
// validator: (value) {
// if (value.isEmpty) {
// return null;
// }
// return null;
// },
onSaved: (value) {
// TODO : when save the whole form
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Số điện thoại*',
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
// TODO: when submit this text field
},
validator: (value) {
if (value.isEmpty) {
return 'Hãy nhập số điện thoại cho liên hệ.';
}
return null;
},
onSaved: (value) {
// TODO : when save the whole form
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
),
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
// TODO: when submit this text field
},
// validator: (value) {
// if (value.isEmpty) {
// return null;
// }
// return null;
// },
onSaved: (value) {
// TODO : when save the whole form
},
),
Container(
padding: EdgeInsets.only(top: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Giới tính',
style: TextStyle(fontSize: 14.0),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
LabeledRadio(
label: 'Nữ',
padding: EdgeInsets.all(0),
groupValue: _contaxtSex,
value: ContactSex.nu,
onChanged: (ContactSex newValue) {
setState(() {
_contaxtSex = newValue;
});
},
),LabeledRadio(
label: 'Nam',
padding: EdgeInsets.all(0),
groupValue: _contaxtSex,
value: ContactSex.nam,
onChanged: (ContactSex newValue) {
setState(() {
_contaxtSex = newValue;
});
},
),LabeledRadio(
label: 'Khác',
padding: EdgeInsets.all(0),
groupValue: _contaxtSex,
value: ContactSex.khac,
onChanged: (ContactSex newValue) {
setState(() {
_contaxtSex = newValue;
});
},
),
],
),
],
),
)
],
)),
),
),
);
}
}
class LabeledRadio extends StatelessWidget {
final String label;
final EdgeInsets padding;
final ContactSex groupValue;
final ContactSex value;
final Function onChanged;
const LabeledRadio(
{this.label, this.padding, this.groupValue, this.value, this.onChanged});
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if (value != groupValue) {
onChanged(value);
}
},
child: Padding(
padding: padding,
child: Row(
children: <Widget>[
Radio<ContactSex>(
groupValue: groupValue,
value: value,
onChanged: (ContactSex newValue) {
onChanged(newValue);
},
),
Text(label),
],
),
),
);
}
}
You just need to set the "dense" property to true, example:
RadioListTile<String>(
title: "My radio",
dense: true, // <= here it is !
value: '1',
);
you should achieve this manually like
make a group of Radio() and Text() and wrap with InkWell() for state handling. now remove extra space of radio by materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, That's it. Get idea by sample code.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
setState(() {
_radioVenue = 0;
});
},
child: Row(
children: [
Radio(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
activeColor: primaryColor,
groupValue: _radioVenue,
onChanged: (value) {},
value: 0,
),
Text('From our list')
],
),
),
InkWell(
onTap: () {
setState(() {
_radioVenue = 1;
});
},
child: Row(
children: [
Radio(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
activeColor: primaryColor,
groupValue: _radioVenue,
onChanged: (value) {},
value: 1,
),
Text('From our list')
],
),
),
],
),
We covered both both the issues in this sample.
Removed extra spaces.
whole group is selectable radio + text, Now it behaves like RadioListTile().
Simply use RadioListTile and remove extra padding, by default it's 18
RadioListTile(contentPadding: EdgeInsets.symmetric(horizontal: 0.0)),
OR
RadioListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
value: null,
groupValue: null,
onChanged: null,
),
glad to answer
I was looking for same question and ended up on Flutter Documentation
I was working on Column and RadioListTile and I faced same issue, there's a horizontal padding between content inside RadioListTile
So, here it's the answer
Looking for this documentation ! RadioListTile content padding
Just add contentPadding: EdgeInsets.symmetric(horizontal: 0) and here you go, there's no horizontal padding anymore
Just copy paste this code and enjoy
Container(
height:35,
child: Row(
children: [
Radio(
groupValue: data.selected,
value: e,
onChanged: (DataBindModel? value) {
listener.value = MultiChoiceData(selected: value, items: listener.value.items);
onChanged(value);
onSelected(value);
},
),
Text(
e.value,
style: body14,
)
],
),
)
Copy the RadioListTile code and create your on new new file and paste it in there.
Remove the imports causing errors:
import 'package:flutter/widgets.dart'; // leave it
import 'package:flutter/material.dart'; //add
import 'list_tile.dart'; //remove
import 'radio.dart'; //remove
import 'theme.dart'; //remove
import 'theme_data.dart'; //remove
Then add the following padding to it, like this:
//Inside the file locate this widget and Add the padding or remove it. I needed to remove it and add 5.
return MergeSemantics(
child: ListTileTheme.merge(
contentPadding: EdgeInsets.only( // Add this
left: 5,
right: 0,
bottom: 0,
top: 0
),
selectedColor: activeColor ?? Theme.of(context).accentColor,
child: ListTile(
leading: leading,
title: title,
subtitle: subtitle,
trailing: trailing,
isThreeLine: isThreeLine,
dense: dense,
enabled: onChanged != null,
onTap: onChanged != null && !checked ? () { onChanged(value); } : null,
selected: selected,
),
),
);
then Import the file into your project like this:
import 'package:Project_Name/common/customComponets/custom_radio_list_tile.dart' as CustomRadioListTile;
Then use it like this:
CustomRadioListTile.RadioListTile(); // and that's how I managed to do it. Thought I should share.
This is my way of reducing the space. I have three Radio in one row.
Row(
children: [
Expanded(
child: RadioListTile(
contentPadding: EdgeInsets.all(0.0),
value: DayoffType.Range,
groupValue: _dayoffType,
title: Transform.translate(offset: const Offset(-18, 0), child: Text('Range')),
onChanged: (DayoffType? val) {
setState(() {
_dayoffType = val!;
});
},
),
),
Expanded(...Radio2...),
Expanded(...Radio3...)
)
I am creating below registration form in Flutter.
TextStyle white =
new TextStyle(color: Colors.white, decorationColor: Colors.white);
TextStyle grey =
new TextStyle(color: Colors.grey, decorationColor: Colors.white);
I want to apply white style to DropDownButton and grey to DropDownMenuItem.
But, the style of DropDownMenu item is also applied to DDButton.
Also, can I "match_parent" the width of DropDownButton like TextField (as in image)?
Here is the code:
child: new Center(
child: new ListView(
shrinkWrap: true,
padding: new EdgeInsets.only(left: 24.0, right: 24.0),
children: <Widget>[
new ListTile(
leading: const Icon(
Icons.language,
color: Colors.white,
),
title: new DropdownButton(
items:
<String>['India', 'Australia', 'USA'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value, ),
);
}).toList(),
value: selected,
onChanged: (String value) {
setState(() {
selected = value;
});
},
style: white,
),
),
new ListTile(
leading: const Icon(Icons.smartphone, color: Colors.white),
title: new TextField(
decoration: new InputDecoration(
hintText: "Phone Number", hintStyle: white),
keyboardType: TextInputType.phone,
style: white,
),
),...
There is the final bool inherit property at the TextStyle Class, you can try something like this:
TextStyle white =
new TextStyle(inherit: false, color: Colors.white, decorationColor: Colors.white);
You can do that using selectedItemBuilder property of the dropdown the issue as of now with that is you cannot use a hintText and selectedItemBuilder together. you can track the open issue here.
But Theres a temporary workaround for this is to use one of them based on the selected dropdownValue
DropdownButton<String>(
value: dropdownValue,
style: TextStyle(color: Colors.grey, fontSize: 15),
hint: dropdownValue != null
? null
: Text(
'Select Value',
style: TextStyle(color: Colors.black),
),
onChanged: (value) => setState(() => dropdownValue = value),
selectedItemBuilder: dropdownValue == null
? null
: (BuildContext context) {
return ['ONE', 'TWO.', 'THREE'].map((String value) {
return Text(
dropdownValue,
style: TextStyle(color: Colors.green),
);
}).toList();
},
items: ['ONE', 'TWO.', 'THREE']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,
style: TextStyle(inherit: false, color: Colors.red)),
);
}).toList(),
),
you can find a dartpad example here
Add isExpanded in DropdownButton.
DropdownButton(
isExpanded: true,
)
Checkout DropDownButton2 for easy customized styling
For more examples and to know more about the package follow this link: DropDownButton2