Flutter: Dropdown value is not getting selected

Flutter: Dropdown value is not getting selected - android

I am developing an app with a dropdown. Below is my code. I have removed the UI design code to isolate the dropdown section itself.
class ShoppingCartUIState extends State<ShoppingCartUI> {
final _formKey = GlobalKey<FormState>();
String _checkoutDropdownValue=null;
//**UI design Code Removed**//
_showCheckoutPopup() {
String date=DateTime.now().toString();
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)), //this right here
child: Container(
height: MediaQuery.of(context).size.height/3,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: Text(
"What is Your Required Delivery Date?",
style: Theme.of(context).textTheme.subtitle,
),)
],
),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.calendar_today),
color: Colors.green,
onPressed: () {
date = "111";
},
),
Text(date)
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top:20, left:10),
child: Text(
"What is your Airport of delivery?",
style: Theme.of(context).textTheme.subtitle,
),)
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top:5, left:10),
child: DropdownButton(
hint: Text(
"Please Select ",
style: TextStyle(
fontSize: 14,
),
),
items: <String>[
'Skinless Boneless, Full Loins',
'brown',
'silver'
].map((data) {
return DropdownMenuItem(
child: new Text(data,
style: Theme.of(context).textTheme.body1),
value: data,
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_checkoutDropdownValue = newValue;
print(newValue);
});
},
value: _checkoutDropdownValue),
)
],
),
],
),
));
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
}
The issue is when I change the dropdown item, the new value never get selected. The previously selected value is always displayed. However since i am using a print when dropdown is done, I can see the item has changed.
How can I solved this issue?

Wrap your Dialog widget with StatefulBuilder to rebuild the dialog.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPage(), //TODO: Add Scaffold
);
}
}
class MyPage extends StatefulWidget {
#override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
String date = "";
String _checkoutDropdownValue;
_showCheckoutPopup() {
return StatefulBuilder(
builder: (context, setState){
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
), //this r// ight here
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: Text(
"What is Your Required Delivery Date?",
style: Theme.of(context).textTheme.subtitle,
),
),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.calendar_today),
color: Colors.green,
onPressed: () {
setState(() {
date = "111";
});
},
),
Text(date)
],
),
Container(
margin: EdgeInsets.only(top: 20, left: 10),
alignment: Alignment.centerLeft,
child: Text(
"What is your Airport of delivery?",
style: Theme.of(context).textTheme.subtitle,
),
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 5, left: 10),
child: DropdownButton<String>(
hint: Text(
"Please Select ",
style: TextStyle(
fontSize: 14,
),
),
items: <String>[
'Skinless Boneless, Full Loins',
'brown',
'silver'
].map((data) {
return DropdownMenuItem(
child: new Text(data,
style: Theme.of(context).textTheme.body1),
value: data,
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_checkoutDropdownValue = newValue;
});
},
value: _checkoutDropdownValue,
),
)
],
),
],
),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text("Click Here"),
onPressed: () {
showDialog(
context: context,
builder: (context) => _showCheckoutPopup(),
);
},
),
),
);
}
}

can you change your onPressed to print(_checkoutDropdownValue); instead of print(newValue); that way we can see if there is a problem with the assignment

Related

AlertDialog not working when the data is null

I'm learning building a weather app with flutter.
The app could display weather data for the current location, and display AlertDialog when there is no weather data (null)
Here is the code:
import 'package:clima/services/weather.dart';
import 'package:clima/utilities/constants.dart';
import 'package:flutter/material.dart';
import 'city_screen.dart';
class LocationScreen extends StatefulWidget {
LocationScreen({this.locationWeather});
final locationWeather;
#override
_LocationScreenState createState() => _LocationScreenState();
}
class _LocationScreenState extends State<LocationScreen> {
WeatherModel weather = WeatherModel();
String weatherMessage;
String cityName;
int temperature;
String weatherIcon;
bool weatherCondition = false;
#override
void initState() {
super.initState();
updateUI(widget.locationWeather);
}
dynamic updateUI(dynamic weatherData) {
if (weatherData == null) {
temperature = 0;
weatherIcon = 'Error!';
return;
}
setState(() {
double temp = weatherData['main']['temp'];
temperature = temp.toInt();
var conditionNumber = weatherData['weather'][0]['id'];
weatherIcon = weather.getWeatherIcon(conditionNumber);
weatherMessage = weather.getMessage(temperature);
cityName = weatherData['name'];
return;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/location_background.jpg'),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.8), BlendMode.dstATop),
),
),
constraints: BoxConstraints.expand(),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () async {
var weatherData = await weather.getLocationWeather();
updateUI(weatherData);
},
child: Icon(
Icons.near_me,
size: 50.0,
),
),
FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CityScreen()),
);
},
child: Icon(
Icons.location_city,
size: 50.0,
),
),
],
),
Padding(
padding: EdgeInsets.only(left: 15.0),
child: Row(
children: <Widget>[
Text(
'$temperature°',
style: kTempTextStyle,
),
Text(
weatherIcon,
style: kConditionTextStyle,
),
],
),
),
weatherCondition
? Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 15.0, 40.0),
child: Text(
'$weatherMessage $cityName!',
textAlign: TextAlign.right,
style: kMessageTextStyle,
),
)
: Center(
child: showDialog(
builder: (BuildContext context) => AlertDialog(
content: Text('Unable to get weather data!'),
actions: [
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('OK'),
),
],
),
) as Widget,
)
],
),
),
),
);
}
}
The code didn't work, the IDE throwed the error : "Failed assertion: line 470 pos 12: 'context != null': is not true."
Hope someone can correct it to work properly.

you have to pass the required parameter for
showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
content: Text('Unable to get weather data!'),
actions: [
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('OK'),
),
],
),
Note: you will face another Exception with this code , as u can't showDialog during the build of the UI

Dynamically Adding Widgets in list item on button’s on pressed function in Flutter

i have list item on my screen ... All I want to know is, how to add dynamicaly a list item on pressing a floatingActionbutton....
here is a first screen on which i have a button (for adding one more item like above item)
in this picture after selecting suit id .. i want when i pressed add button a copy of naap widget displays from which i can select 2ndsuit id...
i read a tutorial from medium.com but there he used sijmply two text boxes whixh is very easy..whereas in my situation it is pretty difficult for me.... but the situation is same .. you can also visit https://medium.com/#anilpandey071999/dynamically-adding-widgets-on-buttons-on-pressed-function-in-flutter-4d9f139744c7
following is my code...
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter_auth/Screens/Dashboard/DashboardScreen.dart';
import 'package:flutter_auth/Screens/SearchCustomer/SearchCustomerScreen.dart';
import 'package:flutter_auth/components/NavDrawer.dart';
import 'package:flutter_auth/components/bottombar.dart';
import 'package:flutter_auth/components/rounded_button.dart';
import 'package:flutter_auth/components/rounded_input_field.dart';
import 'package:flutter_auth/components/drop_down_list.dart';
import 'package:flutter_auth/Screens/Welcome/welcome_screen.dart';
import '../../constants.dart';
import 'components/inputtextfieldname.dart';
import 'components/inputtextfieldnumber.dart';
class AddCustomerScreen extends StatefulWidget {
#override
_AddCustomerScreenState createState() => _AddCustomerScreenState();
}
class _AddCustomerScreenState extends State<AddCustomerScreen> {
final CategoriesScroller categoriesScroller = CategoriesScroller();
ScrollController controller = ScrollController();
bool closeTopContainer = false;
double topContainer = 0;
List<Widget> itemsData = [];
void getPostsData() {
List<AddCustomerScreen> dynamicList = [];
List<dynamic> responseList = Customer_Data;
List<Widget> listItems = [];
responseList.forEach((post) {
listItems.add(GestureDetector(
onTap: () {
// _navigateAndDisplaySelection(context);
},
child: Container(
height: 200,
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20.0)), color: Colors.white, boxShadow: [
BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10.0),
]),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
post["name"], textAlign: TextAlign.center,
style: const TextStyle( fontSize: 20, fontWeight: FontWeight.bold,color: kPrimaryColor),
),
// Expanded(child: drop_down_list())
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:EdgeInsets.symmetric(horizontal:10.0),
child:Container(
height:2.0,
width:275.0,
color:kPrimaryColor),),
],),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(onPressed: (){}, icon: Icon(Icons.camera_alt_rounded), iconSize: 30,color: Color(0XFFc49864)),
IconButton(onPressed: (){}, icon: Icon(Icons.add_photo_alternate_outlined), iconSize: 30,color: Color(0XFFc49864))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: drop_down_list())
])
],),
)),));
});
setState(() {
itemsData = listItems;
});
}
#override
void initState() {
super.initState();
getPostsData();
controller.addListener(() {
setState(() {
});
});
}
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
final double categoryHeight = size.height*0.30;
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text('Add Customer'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home,),
onPressed: (){Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return WelcomeScreen();
},
),
);},
)
]
),
drawer: NavDrawer(),
body:Container(
height: size.height,
child: Column(
children: <Widget>[
const SizedBox(
height: 10,
),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: closeTopContainer?0:1,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: size.width,
alignment: Alignment.topCenter,
height: closeTopContainer?0:categoryHeight,
child: categoriesScroller),
),
Expanded(
child: ListView.builder(
controller: controller,
itemCount: itemsData.length,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
return itemsData[index];
})),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
backgroundColor: Color(0xFF6D4C41),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
);
}
}
void _navigateAndDisplaySelection(BuildContext context) async {
// Navigator.push returns a Future that completes after calling
// Navigator.pop on the Selection Screen.
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SearchCustomerScreen()),
);
}
class CategoriesScroller extends StatelessWidget {
const CategoriesScroller();
#override
Widget build(BuildContext context) {
final double categoryHeight = MediaQuery.of(context).size.height * 0.35 - 50;
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
// scrollDirection: Axis.horizontal,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.topCenter,
child: Row(
children: <Widget>[
Container(
width: 400,
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
height: categoryHeight,
decoration: BoxDecoration(color: Color(0XFFc49864), borderRadius: BorderRadius.all(Radius.circular(20.0)),boxShadow: [
BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10.0),]),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RoundInputField(
hintText: "Customer Name",
onChanged: (value) {},
),
RoundInputFieldNumber(
hintText: "Phone Number",
icon: Icons.phone,
onChanged: (value) {},
),
],
),
),
),
],
),
),
),
);
}
}
class bottombar extends StatelessWidget {
const bottombar();
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomAppBar(
child: Row(
children: [
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
Spacer(),
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
],
),
),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}

The most straight forward way is imho:
embed the widget to be added with showWidgetA ? WidgetA() : Container();
in your button you toggle the value onPressed: () => showWidgetA = !showWidgetA (showWidgetA being bool)

Flutter - put variable value outside a function

i'm trying to show the data i retrieve on a function outside of it (to show in a listview of products) but i cant do it because i cant access the variable.
First I open a dialog where i put the order number, when i click a button on this dialog it runs the following code:
(this function is inside a onPressed).
Future loadProdutos() async{
ProdutosList produtosList =
ProdutosList.fromJson(response.data);
print(produtosList.produtos[1].qtd);
print(produtosList.produtos.length);
}
setState(() {
loadProdutos();
Navigator.pop(context, true);
});
So the data its stored on produtoslist, but when I try to use the produtosList length on the listview (for example) like the example below it cant access the data.
Here
child: ListView.builder(
itemCount: produtosList.produtos.length, <<< //Undefined name 'produtosList'.
Try correcting the name to one that is defined, or defining the name.dart(undefined_identifi
How can I make produtosList accessable from the whole file?
Or to create it outside of the function and use it inside (when i try i cant access the variable inside of the function, maybe because its async).
Heres the full code
class OS extends StatefulWidget {
#override
_OSState createState() => _OSState();
}
class _OSState extends State<OS> {
static _read() async {
final prefs = await SharedPreferences.getInstance();
final key = 'operador';
final value = prefs.getString(key);
print('saved tester $value');
String operadorLogado = value;
return operadorLogado;
}
#override
final _numeroOsController = TextEditingController();
void initState() {
super.initState();
_read();
var produtosList1 = <ProdutoOs>[];
//WidgetsBinding.instance.addPostFrameCallback((_) => _read());
// final prefs = await SharedPreferences.getInstance();
// final key = 'usuario';
// final value = prefs.getString(key);
// print('saved $value');
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("OS Nº xxx"),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
scrollable: true,
title: Text('BUSCAR OS'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: TextFormField(
controller: _numeroOsController,
decoration: InputDecoration(
icon: Icon(Icons.search),
),
),
),
),
actions: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
child: Text("IR"),
onPressed: () async {
Response response;
Dio dio = new Dio();
String url =
'http://192.168.15.2:8090/api/getOs';
response = await dio.post(url, data: {
"numeroos": _numeroOsController.text
});
print(response.statusCode);
jsonDecode(response);
Future loadProdutos() async {
ProdutosList produtosList =
ProdutosList.fromJson(response.data);
print(produtosList.produtos[1].qtd);
print(produtosList.produtos.length);
}
setState(() {
loadProdutos();
Navigator.pop(context, true);
});
},
)
]);
});
},
child: Icon(
Icons.search,
size: 26.0,
),
)),
],
),
body: Column(
children: [
Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: [
Expanded(
flex: 8,
child: Text(
"CLIENTE:",
style: TextStyle(color: Colors.white),
),
),
Expanded(
flex: 8,
child: Text(
"STATUS:",
style: TextStyle(color: Colors.white),
),
),
],
),
),
),
Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 8.0, 0, 8.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Text("CÓDIGO",
style: TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
),
Expanded(
flex: 1,
child: Text(
"QTD",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Expanded(
flex: 3,
child: Text(
"FUNCIONÁRIO",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Expanded(
flex: 4,
child: Text(
"DESCRIÇÃO",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
),
),
),
Divider(
height: 5.0,
),
Expanded(
child: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.fromLTRB(0.0, 4.0, 0.0, 4.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Text(
"12345",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Expanded(
flex: 1,
child: Text(
"12",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Expanded(
flex: 3,
child: Text("example",
style: TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis
),
),
Expanded(
flex: 4,
child: Text(
"DESCRIÇÃO DA PEÇA XXXXXX11111111 XXXXXXX",
style: TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
),
],
),
);
}),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
scrollable: true,
title: Text('ADICIONAR PEÇA'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.search),
),
),
],
),
),
),
actions: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
child: Text("IR"),
onPressed: () {
// your code
}),
],
);
});
},
child: Icon(Icons.add)),
);
}
}

Declare a local variable in class.
For example:
class PhotosScreen {
final photos = <Photo>[];
Future<void> reloadPhotos() async {
photos.clear();
photos.addAll(await api.getPhotos());
setState(() {});
}
}
In your case (you placed a variable to method, not to class):
var produtosList1 = <ProdutoOs>[];
#override
final _numeroOsController = TextEditingController();
void initState() {
super.initState();
}

How to fit all these flutter widgets in one screen?

I am building this flutter App. My problem is I canno fit all the widgets in one screen. and all the font sizes and icons seem to be different although they are meant to be the same. In ReusableCard, when the Container height and width properties are set to 200 and 250 respectively, the whole app resizes but they are not uniform as shown in the picture. Does anyone has a suggestion?
import 'results_page.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content_widget.dart';
import 'reusable_card.dart';
import 'bottom_button.dart';
import 'calculator_brain.dart';
import 'constants.dart';
enum GenderType {
male,
female,
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
GenderType selectedGender;
int height = 180;
int weight = 60;
int age = 20;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CALCULATE BMI'), centerTitle: true),
body: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: ReusableCard(
onPress: () {
setState(() {
selectedGender = GenderType.male;
});
},
colour: selectedGender == GenderType.male
? kActiveCardColor
: kInactiveCardColor,
cardChild:
IconContentWidget('MALE', FontAwesomeIcons.mars),
),
),
Container(
child: ReusableCard(
onPress: () {
setState(() {
selectedGender = GenderType.female;
});
},
colour: selectedGender == GenderType.female
? kActiveCardColor
: kInactiveCardColor,
cardChild: IconContentWidget(
'FEMALE', FontAwesomeIcons.venus),
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
children: <Widget>[
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('HEIGHT', style: kLabelTextStyle),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text(height.toString(),
style: kNumberTextStyle),
Text('cm', style: kLabelTextStyle),
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.white,
inactiveTrackColor: Color(0xFF8D8E98),
thumbColor: Color(0xFFEB1555),
overlayColor: Color(0x29EB1555),
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 15.0),
overlayShape: RoundSliderOverlayShape(
overlayRadius: 30.0),
),
child: Slider(
value: height.toDouble(),
min: 120.0,
max: 220.0,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
),
],
),
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: FittedBox(
child: Material(
color: Color(0xFF00053C),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'WEIGHT(Kg)',
style: kLabelTextStyle,
),
Text(
weight.toString(),
style: kNumberTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RoundIconButton(
iconName: FontAwesomeIcons.minus,
onPressed: () {
setState(() {
weight--;
});
},
),
SizedBox(
width: 15.0,
),
RoundIconButton(
iconName: FontAwesomeIcons.plus,
onPressed: () {
setState(() {
weight++;
});
},
),
],
),
],
),
),
),
Container(
child: ReusableCard(
colour: kActiveCardColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'AGE',
style: kLabelTextStyle,
),
Text(age.toString(), style: kNumberTextStyle),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RoundIconButton(
iconName: FontAwesomeIcons.minus,
onPressed: () {
setState(() {
age--;
});
},
),
SizedBox(
width: 15.0,
),
RoundIconButton(
iconName: FontAwesomeIcons.plus,
onPressed: () {
setState(() {
age++;
});
},
)
],
),
],
),
),
),
],
),
),
),
),
),
BottomButton(
buttonTitle: 'CALCULATE',
onTap: () {
CalculatorBrain calc =
CalculatorBrain(height: height, weight: weight);
print(calc);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ResultsPage(
bmiResult: calc.calculateBMI(),
interpretation: calc.getInterpretation(),
resultText: calc.getResult());
},
),
);
},
),
],
),
);
}
}
class RoundIconButton extends StatelessWidget {
final Function onPressed;
final IconData iconName;
RoundIconButton({#required this.iconName, this.onPressed});
#override
Widget build(BuildContext context) {
return RawMaterialButton(
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
constraints: BoxConstraints.tightFor(width: 56.0, height: 56.0),
elevation: 0.0,
onPressed: onPressed,
child: Icon(iconName),
);
}
}
class ReusableCard extends StatelessWidget {
ReusableCard({#required this.colour, this.cardChild, this.onPress});
final Color colour;
final Widget cardChild;
final Function onPress;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
height: 200,
width: 250,
child: cardChild,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
),
);
}
}[![enter image description here][1]][1]

I am trying to put gesture dectector in the alert dialog to navigate to next page but the alert box overflows

I am not using any button in alert dialog, so in action how can we prevent the overflow the alert dialog, if am using gesture detector or inkwell to get ontap or onpress function or is there any other method to do it
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return UnicornAlertDialog(
title: Column(
children: <Widget>[
Container(
child: Image.asset('images/done.png'),
),
const SizedBox(height: 15.0),
Container(
child: Text(
'Verify',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
)
],
),
content: Text('You have successfully verified your mobile number',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15.0)),
gradient: LinearGradient(
colors: <Color>[
Color(0xDD4a00e0),
Color(0xFF8e2de2),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
actions: <Widget>[
Container(
child: new GestureDetector(
onTap:(){
Navigator.push(context,
MaterialPageRoute(builder: (context) => ThirdRoute()));
} ,
),
),
]
);
});
}

You are getting overflow error due to GestureDetector used inside actions property of the dialog. If you just want user to tap anywhere on the alertDialog, you can wrap the AlertDialog with GestureDetector. With this, when user taps anywhere on the dialog, it will navigate them to thirdRoute. Working code below:
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return GestureDetector(
child: AlertDialog(
title:
Column(
children: <Widget>[
Container(
child: Image.asset('images/done.png'),
),
const SizedBox(height: 15.0),
Container(
child: Text(
'Verify',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
)
],
),
content:
Text('You have successfully verified your mobile number',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 15.0)),
// gradient: LinearGradient(
// colors: <Color>[
// Color(0xDD4a00e0),
// Color(0xFF8e2de2),
// ],
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
// ),
actions: <Widget>[]
),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => NextScreen()));
}
);
});
}
Hope this answers your question.

_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return GestureDetector(
child: UnicornAlertDialog(
title: Column(
children: <Widget>[
Container(
child: Image.asset('images/done.png'),
),
const SizedBox(height: 15.0),
Container(
child: Text(
'Verify',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
)
],
),
content: Text(
'You have successfully verified your mobile number',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15.0)),
gradient: LinearGradient(
colors: <Color>[
Color(0xDD4a00e0),
Color(0xFF8e2de2),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
actions: <Widget>[ ]),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => ThirdRoute()));
},
);
});
}
Unicorn alert dialog is used for background-color decoration, and since you cannot have gradient color in normal alert dialog, I used this.

code snippet
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return UnicornAlertDialog(
title: GestureDetector(
onTap: () { print("on tap title");},
child: Column(
children: <Widget>[
Container(
child: Image.asset('assets/images/background.jpg'),
),
const SizedBox(height: 15.0),
Container(
child: Text(
'Verify',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
)
],
),
),
content: GestureDetector(
onTap: () { print("on tap content");},
child: Text('You have successfully verified your mobile number',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15.0)),
),
gradient: LinearGradient(
colors: <Color>[
Color(0xDD4a00e0),
Color(0xFF8e2de2),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
actions: <Widget>[
]
);
});
}
full code
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
class UnicornAlertDialog extends StatelessWidget {
const UnicornAlertDialog({
Key key,
#required this.gradient,
this.title,
this.titlePadding,
this.titleTextStyle,
this.content,
this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
this.contentTextStyle,
this.actions,
this.backgroundColor,
this.elevation,
this.semanticLabel,
this.shape,
}) : assert(contentPadding != null),
super(key: key);
final Gradient gradient;
final Widget title;
final EdgeInsetsGeometry titlePadding;
final TextStyle titleTextStyle;
final Widget content;
final EdgeInsetsGeometry contentPadding;
final TextStyle contentTextStyle;
final List<Widget> actions;
final Color backgroundColor;
final double elevation;
final String semanticLabel;
final ShapeBorder shape;
#override
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
final ThemeData theme = Theme.of(context);
final DialogTheme dialogTheme = DialogTheme.of(context);
final List<Widget> children = <Widget>[];
String label = semanticLabel;
if (title != null) {
children.add(Padding(
padding: titlePadding ?? EdgeInsets.fromLTRB(24.0, 24.0, 24.0, content == null ? 20.0 : 0.0),
child: DefaultTextStyle(
style: titleTextStyle ?? dialogTheme.titleTextStyle ?? theme.textTheme.title,
child: Semantics(
child: title,
namesRoute: true,
container: true,
),
),
));
} else {
switch (defaultTargetPlatform) {
case TargetPlatform.iOS:
label = semanticLabel;
break;
case TargetPlatform.android:
case TargetPlatform.fuchsia:
label = semanticLabel ?? MaterialLocalizations.of(context)?.alertDialogLabel;
}
}
if (content != null) {
children.add(Flexible(
child: Padding(
padding: contentPadding,
child: DefaultTextStyle(
style: contentTextStyle ?? dialogTheme.contentTextStyle ?? theme.textTheme.subhead,
child: content,
),
),
));
}
if (actions != null) {
children.add(ButtonTheme.bar(
child: ButtonBar(
children: actions,
),
));
}
Widget dialogChild = IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: children,
),
);
if (label != null)
dialogChild = Semantics(
namesRoute: true,
label: label,
child: dialogChild,
);
return Dialog(
backgroundColor: backgroundColor,
gradient: gradient,
elevation: elevation,
shape: shape,
child: dialogChild,
);
}
}
class Dialog extends StatelessWidget {
const Dialog({
Key key,
this.gradient,
this.backgroundColor,
this.elevation,
this.insetAnimationDuration = const Duration(milliseconds: 100),
this.insetAnimationCurve = Curves.decelerate,
this.shape,
this.child,
}) : super(key: key);
final Color backgroundColor;
final double elevation;
final Duration insetAnimationDuration;
final Curve insetAnimationCurve;
final ShapeBorder shape;
final Widget child;
final Gradient gradient;
static const RoundedRectangleBorder _defaultDialogShape =
RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0)));
static const double _defaultElevation = 24.0;
#override
Widget build(BuildContext context) {
final DialogTheme dialogTheme = DialogTheme.of(context);
return AnimatedPadding(
padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
duration: insetAnimationDuration,
curve: insetAnimationCurve,
child: MediaQuery.removeViewInsets(
removeLeft: true,
removeTop: true,
removeRight: true,
removeBottom: true,
context: context,
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 280.0),
child: Material(
color: backgroundColor ?? dialogTheme.backgroundColor ?? Theme.of(context).dialogBackgroundColor,
elevation: elevation ?? dialogTheme.elevation ?? _defaultElevation,
shape: shape ?? dialogTheme.shape ?? _defaultDialogShape,
type: MaterialType.card,
child: ClipRRect(
borderRadius: _defaultDialogShape.borderRadius,
child: Container(
decoration: BoxDecoration(
gradient: gradient
),
child: child,
),
),
),
),
),
),
);
}
}
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return UnicornAlertDialog(
title: GestureDetector(
onTap: () { print("on tap title");},
child: Column(
children: <Widget>[
Container(
child: Image.asset('assets/images/background.jpg'),
),
const SizedBox(height: 15.0),
Container(
child: Text(
'Verify',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
)
],
),
),
content: GestureDetector(
onTap: () { print("on tap content");},
child: Text('You have successfully verified your mobile number',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15.0)),
),
gradient: LinearGradient(
colors: <Color>[
Color(0xDD4a00e0),
Color(0xFF8e2de2),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
actions: <Widget>[
]
);
});
}
Future<void> _ackAlert(BuildContext context) {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Not in stock'),
content: const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
enum ConfirmAction { CANCEL, ACCEPT }
Future<ConfirmAction> _asyncConfirmDialog(BuildContext context) async {
return showDialog<ConfirmAction>(
context: context,
barrierDismissible: false, // user must tap button for close dialog!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Reset settings?'),
content: const Text(
'This will reset your device to its default factory settings.'),
actions: <Widget>[
FlatButton(
child: const Text('CANCEL'),
onPressed: () {
Navigator.of(context).pop(ConfirmAction.CANCEL);
},
),
FlatButton(
child: const Text('ACCEPT'),
onPressed: () {
Navigator.of(context).pop(ConfirmAction.ACCEPT);
},
)
],
);
},
);
}
Future<String> _asyncInputDialog(BuildContext context) async {
String teamName = '';
return showDialog<String>(
context: context,
barrierDismissible: false, // dialog is dismissible with a tap on the barrier
builder: (BuildContext context) {
return AlertDialog(
title: Text('Enter current team'),
content: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
autofocus: true,
decoration: new InputDecoration(
labelText: 'Team Name', hintText: 'eg. Juventus F.C.'),
onChanged: (value) {
teamName = value;
},
))
],
),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop(teamName);
},
),
],
);
},
);
}
enum Departments { Production, Research, Purchasing, Marketing, Accounting }
Future<Departments> _asyncSimpleDialog(BuildContext context) async {
return await showDialog<Departments>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Select Departments '),
children: <Widget>[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Departments.Production);
},
child: const Text('Production'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Departments.Research);
},
child: const Text('Research'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Departments.Purchasing);
},
child: const Text('Purchasing'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Departments.Marketing);
},
child: const Text('Marketing'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Departments.Accounting);
},
child: const Text('Accounting'),
)
],
);
});
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: Text("Dialog"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: () {
_showDialog(context);
},
child: const Text("Unicon Dialog"),
),
new RaisedButton(
onPressed: () {
_ackAlert(context);
},
child: const Text("Ack Dialog"),
),
new RaisedButton(
onPressed: () async {
final ConfirmAction action = await _asyncConfirmDialog(context);
print("Confirm Action $action" );
},
child: const Text("Confirm Dialog"),
),
new RaisedButton(
onPressed: () async {
final Departments deptName = await _asyncSimpleDialog(context);
print("Selected Departement is $deptName");
},
child: const Text("Simple dialog"),
),
new RaisedButton(
onPressed: () async {
final String currentTeam = await _asyncInputDialog(context);
print("Current team name is $currentTeam");
},
child: const Text("Input Dialog"),
),
],
),
),
);
}
}
void main() {
runApp(new MaterialApp(home: new MyApp()));
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Flutter: Dropdown value is not getting selected - android

can you change your onPressed to print(_checkoutDropdownValue); instead of print(newValue); that way we can see if there is a problem with the assignment

Related

AlertDialog not working when the data is null

Dynamically Adding Widgets in list item on button’s on pressed function in Flutter

Flutter - put variable value outside a function

How to fit all these flutter widgets in one screen?

I am trying to put gesture dectector in the alert dialog to navigate to next page but the alert box overflows

Categories

Resources