Extracting bottom modal sheet into separate widget looses BlocProvider flutter - flutter

First of all I hope your all well in this globally very hard hitting period. I'm refactoring parts of my screens codes and I'm stuck with this.
I have a bottom modal sheet I extracted into a separate file to keep my MapScreen UI code short and clear but something goes wrong. The error I get is BlocProvider.of() called with a context that does not contain a Bloc of type TrackingBloc. Does that men that I have to declare a BlocProvider also in the separate file? Doesn't it get passed to the widget with the context:context parameter? I then tried adding it but still get the error. Can you spot what I'm doing wrong?
As always thank you very much for your time and help, especially in this very hard time.
UI modal bottom sheet:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (modal) {
// return AndroidTrackingSheet(routeName,
// isTracking, _textEditingController);
return Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(modal)
.viewInsets
.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller:
_textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking
? routeName
: 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight:
FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder:
OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking
? "Fine tracking"
: 'Inizia tracking',
style: TextStyle(
fontSize: 18,
color: Colors.white),
),
onPressed: () {
print(
"Action 2 is been clicked");
routeName =
_textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(
context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.redAccent,
child: Text(
'Cancella',
style: TextStyle(
fontSize: 18,
color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
);
});
Separate widget modal sheet:
class AndroidTrackingSheet extends StatelessWidget {
TextEditingController _textEditingController;
bool isTracking;
String routeName;
AndroidTrackingSheet(
this.routeName, this.isTracking, this._textEditingController);
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller: _textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking ? routeName : 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking ? "Fine tracking" : 'Inizia tracking',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
print("Action 2 is been clicked");
routeName = _textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
'Cancella',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
);
}
}
Separate bottom sheet with bloc provider:
class AndroidTrackingBottomSheet extends StatelessWidget {
TextEditingController _textEditingController;
bool isTracking;
String routeName;
AndroidTrackingBottomSheet(
this.routeName, this.isTracking, this._textEditingController);
#override
Widget build(BuildContext context) {
return BlocProvider<TrackingBloc>(
create: (context) => TrackingBloc(),
child: Container(
color: Color(0xff757575),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
// mainAxisAlignment:
// MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
'Nuovo percorso',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.orangeAccent,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10,
),
Text(
'Inserisci un nome per il tuo nuovo percorso, e scegli Inizia tracking. Quando sarai arrivato a destinazione premi di nuovo il bottone Tracking e scegli Fine tracking.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
TextField(
controller: _textEditingController,
autofocus: true,
textAlign: TextAlign.center,
showCursor: true,
decoration: InputDecoration(
hintText: isTracking ? routeName : 'nome percorso',
labelStyle: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w100),
border: OutlineInputBorder(),
// focusColor:
// Colors.lightGreenAccent,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orange,
width: 1,
),
),
),
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
isTracking ? "Fine tracking" : 'Inizia tracking',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
print("Action 2 is been clicked");
routeName = _textEditingController.text;
Navigator.pop(context);
isTracking = !isTracking;
BlocProvider.of<TrackingBloc>(context)
.add(StartStopTracking());
},
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.orangeAccent,
child: Text(
'Cancella',
style: TextStyle(fontSize: 18, color: Colors.white),
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
),
);
}
}

I finally found out that the Bloc has to be provided to the bottom sheet via BlocProvider.value, not in the widget file ,so the working code is :
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (modal) {
return BlocProvider.value(
value: BlocProvider.of<TrackingBloc>(context),
child: AndroidTrackingBottomSheet(
widget.key,
routeName,
isTracking,
_textEditingController),
);

Related

flutter unexpected errors

i am no newbie to the whole thing of being in a circle of errors, bugs and problem solving.
what i have been facing for the last few weeks is the fact that the code works in another laptop, maybe at someone else's project but i get the errors like it doesn't work although i checked and have run the process successfully a few times before.
it had posted, and those errors didn't exist.
we do have a null checker:
child: SingleChildScrollView(
child: isLoading
? Column(
knowing that is Loading is false
and i run android studio.
ps some of the code below feels missing because it has valuable data , and or it would have been longer than what it already is
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: MaterialApp(
theme: ThemeData(fontFamily: 'Harmattan',),
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
actions: [
IconButton(onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => MaintenanceDataTypesByDriver()));
}, icon: Icon(Icons.view_headline_sharp,size: 40,),)
],
title: Center(child: Text(
'enter',
style: TextStyle(fontSize: 25, color: Colors.white),
),),
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(
Icons.arrow_back_rounded,
size: 40,
color: Colors.white,
),
onPressed: () {
//Navigator.pushNamed(context, mainScreen.id);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => maintenance_screen()));
},
);
},
),
),
body: TabBarView(
children: [
Center(
child: SingleChildScrollView(
child: isLoading
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Text(" اplease hold.. ")
],
)
: new Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 0),
Center(
child: Text(
" choose an option",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Operations Types Api List New /
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.........
}).toList(),
onChanged: (String? newVal) {
setState(() {
print(faultReportingName1.toString());
});
},
value: faultReportingName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 5),
Center(
child: Text(
"press here",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Fault Locations Api List New
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("اpress here",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.....
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
textAlign : TextAlign.end,
),
...........
},
value: faultLocationsName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 10),
Center(
child: Text(
" date",
style: TextStyle(fontSize: 25),
),
),
//
Container(
width: 300,
height: 75,
child: TextField(
style: TextStyle(color: Colors.black, fontSize: 20),
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
showDatePicker(context: context, initialDate: DateTime.now(), textAlign: TextAlign.center,
decoration: InputDecoration(
errorStyle: TextStyle(height: 0.1),
errorText: _validateStartingDateController ? 'date' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: '$faultDate1' ,
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.yellow,
/* 0xfffdbd2a*/width: 20),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
),
//
Center(
child: Text(
"maintenance ",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
keyboardType: TextInputType.number,
//inputFormatters: [FilteringTextInputFormatter.digitsOnly],
controller: opCostController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorText: _valueValidate ? 'required' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: 'IQD ',
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 0),
Center(
child: Text(
"notes",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
controller: notesController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorStyle: TextStyle(height: 1),
alignLabelWithHint: true, hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 5),
Center(
child: _file == null ? Text('') :
Container(
height: 310,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_file!),
),
borderRadius: BorderRadius.circular(10),
),
//child: Image.asset('images/Logistic.jpg'),
),
),
Container(
height: 50,
width: 200,
child: ElevatedButton(
//style: ElevatedButton.styleFrom(side: BorderSide(width: 1,style: BorderStyle.solid),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side: BorderSide(color: Colors.white)))),
//style: ButtonStyle(shape: OutlinedBorder()),
child: Text(
'save',
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
//if(isLoading)return;
setState(() {
double opCost = double.parse(opCostController.text.trim());
String date = faultDateController.text;
int faultLocID = int.parse(faultLocationsName1!.trim());
int faultRepID = int.parse(faultReportingName1!.trim());
String notes = notesController.text.trim();
if(opCost.isNaN || faultReportingName1=='' || faultLocationsName1=='' ||date =='')
{
print('empty');
return;
}
else{
upload();
I think the problem is coming from your data model class. some of your String values is Null.
Try to check it carefully.

Flutter bottomNavigationBar under put row section

I'm a beginner in the flutter, Im added my flutter page to bottomNavigationBar: Container to button and i want to to put under bottom button to this section
like this my image
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
),
any idea how can i put it correctly ?
Thanks
import 'dart:ui';
import 'package:cmapp/widgets/components/alert.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:cmapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SignUpScreen extends StatefulWidget {
#override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State< SignUpScreen > {
//validation controller
TextEditingController fNameController = new TextEditingController();
TextEditingController lNameController = new TextEditingController();
TextEditingController nickNameController = new TextEditingController();
TextEditingController phoneController = new TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm=false;
check (BuildContext context){
if(fNameController.text.isNotEmpty &&
lNameController.text.isNotEmpty &&
nickNameController.text.isNotEmpty &&
phoneController.text.isNotEmpty){
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
/* double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;*/
return Scaffold(
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
_signUp(),
],
),
),
bottomNavigationBar: Container(
padding: EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),
);
}
Widget _signUp() {
return Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Form(
key: formKey,
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 34.0,fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
/* SizedBox(
height: 10.0,
),*/
/* Text(
"Enter to a beautiful world",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w300,
),
)*/
],
),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 29,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Text(
'First Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
/* keyboardType: TextInputType.emailAddress,*/
controller: fNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Last Name',
style:
TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
SizedBox(
height: 12.0,
),
TextField(
controller: lNameController,
onChanged: (val){
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
controller: nickNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/*prefixIcon: Icon(
Icons.people_outline_rounded,
color: Color(0xFFE1E8F7),
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Mobile Number',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
controller: phoneController,
onChanged: (val){
check(context);
},
maxLength: 10,
/* validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},*/
keyboardType: TextInputType.phone,
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "077xxxxxxx",
),
),
SizedBox(
height: 20.0,
),
/*
Container( alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 2,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),*/
/* Container(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476)
])),
child: Text(
'Next',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),*/
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), SizedBox(
height:100.0,
),
],
),
),
),
],
),
),
),
),
);
}
}
Use Column inside Container for Button and Text.
Container(
padding: EdgeInsets.all(8.0),
child: Column(
children: [
// first row
Row(children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
])
//second row
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), ],)
),

I want to control the texteditingcontroller for each of the IngredientContainers' so that i can display it on my screen

Instead all of them being Hello i want each of them to be individually typed in and different val
Here's the code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:recipe_saver/Screens/saver_recipes.dart';
class RecipeEditorScreen extends StatefulWidget {
#override
_RecipeEditorScreenState createState() => _RecipeEditorScreenState();
}
class _RecipeEditorScreenState extends State<RecipeEditorScreen> {
// ignore: non_constant_identifier_names
List IngredientContainer = [];
final textFieldEdit = TextEditingController();
TextEditingController IngredientSaver = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
height: MediaQuery
.of(context)
.size
.height,
width: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueGrey, Colors.blueGrey[900]])),
),
Container(
padding: EdgeInsets.symmetric(
vertical: Platform.isIOS ? 60 : 30, horizontal: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) =>
saverecipes()));
},
child: Text(
"Recipe",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
),
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) =>
saverecipes()));
},
child: Text(
"Saver",
style: TextStyle(
color: Colors.blue,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
SizedBox(
height: 30,
),
Stack(
children: [
Container(
margin: EdgeInsets.symmetric(
vertical: Platform.isIOS ? 120 : 90, horizontal: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
colors: [Colors.blue, Colors.blueAccent],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.only(top: 15, left: 5),
child: Text(
"Dish:",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 35,
fontFamily: 'Overpass',
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(top: 15, right: 5, left: 10),
child: TextField(
controller: textFieldEdit,
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: "Enter Dish Title",
hintStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 25,
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blueAccent),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.blueAccent),
)),
style: TextStyle(
fontFamily: 'Overpass',
fontSize: 35,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
),
],
),
SizedBox(
height: 50,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 5),
child: Text(
"Ingredients:",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.black,
fontSize: 25,
fontFamily: 'Overpass'),
),
),
IconButton(
icon: Icon(Icons.add_circle_outline,
size: 30, color: Colors.black),
onPressed: () {
setState(() {
IngredientContainer.add('');
});
},
),
],
),
Expanded(
child: Container(
height: double.infinity,
width: MediaQuery
.of(context)
.size
.width,
child: ListView.builder(
itemCount: IngredientContainer.length,
itemBuilder: (context, index) {
return Container(
height: 50,
width: MediaQuery
.of(context)
.size
.width,
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 7),
child: Text(
"Ingredient:",
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'OverPass',
fontSize: 17,
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(left: 8, right: 8),
child: TextField(
controller: IngredientSaver,
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Type Ingredient
Here',
hintStyle: TextStyle(
fontSize: 17,
fontFamily: 'Overpass',
fontWeight: FontWeight.w200,
color: Colors.grey,
),
enabledBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent),
),
focusedBorder:
UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent),
),
),
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'Overpass',
fontSize: 17,
color: Colors.black,
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
IngredientContainer.removeAt(index);
});
},
child: Padding(
padding: EdgeInsets.only(right: 7),
child: Container(
child: Icon(Icons.delete),
),
),
)
],
),
);
},
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueGrey,
Colors.blueGrey[900]]
),
borderRadius: BorderRadius.circular(7)
),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Enter",
style: TextStyle(
fontSize: 20,
fontFamily: 'Overpass',
fontWeight: FontWeight.w600,
color: Colors.black
),
),
),
),
)
],
),
),
],
),
],
),
);
}
}

How can I display the error message in a seperate snackbar or toast in Flutter?

This is my very first question if I make a faux pas kindly correct me :)
Coding in : Android Studio
Language is: Flutter/Dart
Question: How do I display the error message that is displayed just under the textformfield in a separate toast/snack bar/flush bar ?
Video-Link of the issue : https://youtu.be/4hJtR11o1GU
Code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:video_player/video_player.dart';
class LoginForm extends StatefulWidget {
LoginForm(this.submitFn, this.isLoading);
final bool isLoading;
final void Function(
String email,
String password,
String mobile,
bool isLogin,
BuildContext ctx,
) submitFn;
#override
_LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
var _isLogin = true;
String _userEmail = '';
String _userPassword = '';
String _userMobile = '';
void _trySubmit() {
final isValid = _formKey.currentState.validate();
FocusScope.of(context).unfocus();
if (isValid) {
_formKey.currentState.save();
widget.submitFn(
_userEmail.trim(),
_userPassword.trim(),
_userMobile.trim(),
_isLogin,
context
);
}
}
Widget _buildEmailTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 50.0,
child: TextFormField(
key: ValueKey('email'),
validator: (value) { if (value.isEmpty || !value.contains('#')) {return
'enter a valid email';} return null;},
keyboardType: TextInputType.emailAddress,
style: TextStyle(color: Colors.white, fontFamily: 'OpenSans',),
decoration: InputDecoration(
isDense: true,
hintText: 'username#xyz.com',
hintStyle: TextStyle(color: Colors.white, ),
contentPadding: EdgeInsets.only(top: 14.0),
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
prefixIcon: Icon(
Icons.email,
color: Colors.orange ,
),
),
onSaved:(value){_userEmail = value;},
),
),
],
);
}
Widget _buildMobileTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 50.0,
child: TextFormField(
key: ValueKey('mobile'),
validator: (value) { if (value.isEmpty || !value.contains('91') || value.length > 12 || value.length < 12) {
return '';} return null;},
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
hintText: '91 xxx-xxx-xxxx',
hintStyle: TextStyle(color: Colors.white, ),
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.phone_android,
color: Colors.orange,
),
),
onSaved:(value){_userMobile = value;},
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
height: 60.0,
child: TextFormField(
key: ValueKey('password'),
validator: (value) {if (value.isEmpty || value.length < 7) {
return '';} return null;},
obscureText: true,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
errorMaxLines: 1,
errorText: 'Null',
errorStyle: TextStyle(
color: Colors.transparent,
fontSize: 0,
),
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.orange,
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white, )
),
onSaved:(value){
_userPassword = value;
},
),
),
],
);
}
Widget _buildLoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: RaisedButton(
onPressed: _trySubmit,
elevation: 5.0,
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(_isLogin ? 'Login In' : 'Sign Up',
style: TextStyle(
color: Colors.orange,
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
),
),
),
);
}
Widget _buildSignUpWithText() {
return Column(
children: <Widget>[
FlatButton(
textColor: Theme.of(context).primaryColor,
child: Text(_isLogin ? 'Sign Up With An Email Account' : 'I Already Have An Account',
style: TextStyle(
color: Colors.orange,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
setState(() {
_isLogin = !_isLogin;
});
},
),
SizedBox(height: 20.0),
Text(
'- OR -',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
);
}
Widget _buildSocialBtn(Function onTap, AssetImage logo) {
return GestureDetector(
onTap: (){
setState(() {
});
_isLogin = !_isLogin;
},
child: Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 2),
blurRadius: 6.0,
),
],
image: DecorationImage(
image: logo,
),
),
),
);
}
Widget _buildSocialBtnRow() {
return Padding(
padding: EdgeInsets.symmetric(vertical: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildSocialBtn(
() => print('Sign Up with Google'),
AssetImage(
'assets/logos/google.jpg',
),
),
],
),
);
}
Widget _buildHomeChefSignUp() {
return GestureDetector(onTap: () => print('Chef\'s Sign Up Process'),
child: RichText(
text: TextSpan(
children: [
TextSpan(text: 'Passionate About Cooking ? ',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.w400,
),),
TextSpan(text: 'Join Us',
style: TextStyle(
color: Colors.orange,
fontSize: 12.0,
fontWeight: FontWeight.w400,
),),
])),
);
}
#override
Widget build(BuildContext context) {
//Keeps Back Ground Fixed even with Keyboard Opened
return Scaffold(resizeToAvoidBottomPadding: false,
//Top Status Bar Overlay Dark or Light
body: AnnotatedRegion<SystemUiOverlayStyle>(value: SystemUiOverlayStyle.light,
child: GestureDetector(onTap: ()=>FocusScope.of(context).unfocus(),
//Main Tree holding All the necessary Containers
child: Stack(children: <Widget>[
//Holds the background Video
Container(),
//Creates a black overlay to the background
Container(
height: double.infinity,
color: Colors.black.withAlpha(120),),
//Hold the Login Form
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 100.0,),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Mother\'s Kitchen',
style: TextStyle(
color: Colors.orange,
fontFamily: 'MomsFonts',
fontSize: 40.0,
fontWeight: FontWeight.bold,),),
SizedBox(height: 10.0),
Text(
'Mumbai\'s First & Only Home Cooked Delivery Service',
style: TextStyle(
color: Colors.orange,
fontFamily: 'OpenSans',
fontSize: 12.0,
fontWeight: FontWeight.bold,),),
SizedBox(height: 30.0),
_buildEmailTF(),
SizedBox(height: 10.0,),
if(!_isLogin)
_buildMobileTF(),
_buildPasswordTF(),
if(widget.isLoading)
Column(
children: <Widget>[
SizedBox(height: 10.0),
CircularProgressIndicator(),
],
),
if(!widget.isLoading)
_buildLoginBtn(),
_buildSignUpWithText(),
_buildSocialBtnRow(),
_buildHomeChefSignUp(),
],),
),),
),],
),),
),);
}
}

Flutter - Responsive ui for different screen sizes

I am trying to figure out the responsive aspect of flutter. So as you can see from the image things are not going all that well for the different screen sizes of iPhone.
I am working with a Stack and FractionallySizedBox but not sure if what I am doing is correct. Any help is appreciate.
Code is available here -> https://gist.github.com/GY22/1eefb5e48fdca9d785365cbccbdcb478
import 'package:flutter/material.dart';
class SignIn extends StatelessWidget {
//textfields + logo
List<Widget> _buildChildrenForm() {
return [
//logo
Text(
'THE GUEST LIST',
style: TextStyle(
color: Colors.white,
fontFamily: 'futura',
fontSize: 60.0
)
),
//email
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white
)
),
labelText: 'EMAIL',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
//hintText: 'DEMO#MAIL.COM',
hintStyle: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
style: TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
SizedBox(height: 20.0,),
//password
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
obscureText: true,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white
)
),
labelText: 'PASSWORD',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
hintStyle: TextStyle(
color: Colors.white
),
),
style: TextStyle(
color: Colors.white,
),
),
SizedBox(height: 65.0,),
//submit button
FlatButton(
child: Text(
'SIGN IN',
style: TextStyle(
fontSize: 35.0,
color: Colors.white
),
),
onPressed: () {},
),
SizedBox(height: 10.0),
//forget password
FlatButton(
child: Text(
'FORGOT PASSWORD',
style: TextStyle(
color: Colors.white,
fontSize: 17.0
),
),
onPressed: () {},
)
];
}
Widget _formSignIn(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
children: _buildChildrenForm(),
),
);
}
#override
Widget build(BuildContext context) {
final double screenHeight = MediaQuery.of(context).size.height;
final double halfScreen = screenHeight / 2;
final double finalHeight = halfScreen / screenHeight;
debugPrint(MediaQuery.of(context).size.height.toString());
//debugPrint(MediaQuery.of(context).size.width.toString());
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
//bg image
FractionallySizedBox(
alignment: Alignment.topLeft,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/backgroundWithOpacity.png'),
fit: BoxFit.cover
)
),
),
),
//form
FractionallySizedBox(
alignment: Alignment.center,
heightFactor: 1 - finalHeight,
child: ListView(
children: <Widget>[
_formSignIn(context)
],
),
)
],
),
);
}
}
Use FittedBox for compressing the title in device width.
Use Align for centering, we need ListView only for keyboard appearences, normally the content you wanna show to the user is even small enough for iPhone 5s.
You have extra line of codes and I removed.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: SignIn(),
)));
}
class SignIn extends StatelessWidget {
List<Widget> _buildChildrenForm() => [
//logo
SizedBox(
width: double.infinity,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text('THE GUEST LIST',
style: TextStyle(
color: Colors.white, fontFamily: 'futura', fontSize: 60.0)),
),
),
//email
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
labelText: 'EMAIL',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
//hintText: 'DEMO#MAIL.COM',
hintStyle: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
//password
SizedBox(height: 20),
TextField(
cursorColor: Colors.white,
cursorWidth: 3.0,
obscureText: true,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
labelText: 'PASSWORD',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
hintStyle: TextStyle(color: Colors.white),
),
style: TextStyle(
color: Colors.white,
),
),
//submit button
SizedBox(height: 65),
FlatButton(
child: Text(
'SIGN IN',
style: TextStyle(fontSize: 35.0, color: Colors.white),
),
onPressed: () {},
),
SizedBox(height: 10),
//forget password
FlatButton(
child: Text(
'FORGOT PASSWORD',
style: TextStyle(color: Colors.white, fontSize: 17.0),
),
onPressed: () {},
)
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
//bg image
FractionallySizedBox(
alignment: Alignment.topLeft,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/backgroundWithOpacity.png'),
fit: BoxFit.cover)),
),
),
//form
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: ListView(
shrinkWrap: true,
children: _buildChildrenForm(),
),
),
)
],
),
);
}
}
Avoid SizeConfig (custom class) and hard coded dimensions as much as you can.
Example: MediaQuery.of(context).size.width - someValue
Best easiest way to to make responsive UI for different screen size is Sizer plugin.
Check it this plugin ⬇️
https://pub.dev/packages/sizer
You can use SingleChildScrollView or ListView, and using relative proportions