So I have been trying to work around this but couldn't I have a search box inside my appbar in flutter and I have a PreferredSize to help with the height my I have extra space as shown with the blue line in the image below. Can someone help on how to remove this padding-like space as I want the content to align with the content below the search box? Below is the screenshot and my code snippet.
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0),
// here the desired height
child: AppBar(
centerTitle: true,
backgroundColor: colorGreen,
title: Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
child: SizedBox(
height: 40,
width: double.infinity,
child: Row(
children: <Widget>[
// Expanded(
Container(
padding: EdgeInsets.only(bottom:6),
width: 240,
alignment: Alignment.centerLeft,
child: TextField(
readOnly: true,
onTap: (){
},
textAlign: TextAlign.left,
controller: controller,
cursorColor: Colors.grey,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: 'Montserrat'),
onChanged:
onSearchTextChanged,
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 13,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
border: InputBorder.none,
prefixIcon: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.search,
color: Colors.grey,
size: 15,
)),
suffixIcon: Visibility(
visible: backClear,
child:InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.backspace,
color: Colors.grey,
size: 12,
)))),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 14,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
// hintText:Center(child: Text(""),), //contentPadding: EdgeInsets.only(top: 2),
),
),
),
new Container(
width: 2.0,
height: 100.0,
color: colorGreen,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: new Theme(
data: Theme.of(context)
.copyWith(
canvasColor:colorGray,
),
child:Directionality(
textDirection: TextDirection.ltr,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
//iconSize: 15,
isDense: false,
icon: Container(
padding: EdgeInsets.all(0),
child:Icon(
//Icons.arrow_drop_down,
Icons.location_on,
color: Colors.grey,
size: 15,
)),
hint: Center(
child: Text(
"All Cities",
textAlign: TextAlign
.center,
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
)),
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
//value: selectedCountry,
onChanged: (newVal) {
setState(() {
});
},
value: _mySelection,
items:
data.map((item) {
return new DropdownMenuItem(
child: Container(
child: Container(
padding: EdgeInsets.all(0),
child: Center(
child: Text(
""
))),
),
value: item['id']
.toString(),
);
}).toList(),
isExpanded: true,
),
),
)
),
)
),
)
],
),
))),
),
),
Add titleSpacing 0 and automaticallyImplyLeading false as below:
AppBar(
automaticallyImplyLeading: false,
titleSpacing: 0
)
Note: It will remove leading icon , you can add your own custom Leading icon.
Make center title to false and add leadingWidth: 0,
centerTitle: false,
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0),
// here the desired height
child: AppBar(
leadingWidth: 0,
centerTitle: true,
backgroundColor: colorGreen,
title: Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
child: SizedBox(
height: 40,
width: double.infinity,
child: Row(
children: <Widget>[
// Expanded(
Container(
padding: EdgeInsets.only(bottom:6),
width: 240,
alignment: Alignment.centerLeft,
child: TextField(
readOnly: true,
onTap: (){
},
textAlign: TextAlign.left,
controller: controller,
cursorColor: Colors.grey,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: 'Montserrat'),
onChanged:
onSearchTextChanged,
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 13,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
border: InputBorder.none,
prefixIcon: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.search,
color: Colors.grey,
size: 15,
)),
suffixIcon: Visibility(
visible: backClear,
child:InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.backspace,
color: Colors.grey,
size: 12,
)))),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 14,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
// hintText:Center(child: Text(""),), //contentPadding: EdgeInsets.only(top: 2),
),
),
),
new Container(
width: 2.0,
height: 100.0,
color: colorGreen,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: new Theme(
data: Theme.of(context)
.copyWith(
canvasColor:colorGray,
),
child:Directionality(
textDirection: TextDirection.ltr,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
//iconSize: 15,
isDense: false,
icon: Container(
padding: EdgeInsets.all(0),
child:Icon(
//Icons.arrow_drop_down,
Icons.location_on,
color: Colors.grey,
size: 15,
)),
hint: Center(
child: Text(
"All Cities",
textAlign: TextAlign
.center,
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
)),
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
//value: selectedCountry,
onChanged: (newVal) {
setState(() {
});
},
value: _mySelection,
items:
data.map((item) {
return new DropdownMenuItem(
child: Container(
child: Container(
padding: EdgeInsets.all(0),
child: Center(
child: Text(
""
))),
),
value: item['id']
.toString(),
);
}).toList(),
isExpanded: true,
),
),
)
),
)
),
)
],
),
))),
),
),
You can replace the title with flexibleSpace
AppBar(
centerTitle: true,
backgroundColor: Colors.green,
flexibleSpace: Container(
// height: 35, <-- adjust height here
margin: EdgeInsets.zero,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
....
)
),
)
Related
I want to give border to DropdownButton and DropdownMenu like below image along with height itemHeight of 21px and some background color to DropdownMenuItem on mouse hover and on keyboard up or down keys:
Here is what I have tried till now:
var genderList = [
'Female',
'Male',
'Other',
];
String? selection;
final border = const OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Color(0xFF00AFEF),
),
borderRadius: BorderRadius.all(Radius.circular(7)),
);
...
SizedBox(
height: 38.h,
// color: Colors.blue,
child: InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: border,
enabledBorder: border,
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 13.w),
child: const Text(
'Gender',
style: TextStyle(
fontSize: 14,
color: Color(0xFF606060),
),
),
),
),
value: selection,
icon: Container(
margin: EdgeInsets.symmetric(horizontal: 13.w),
height: 10.r,
width: 16.r,
alignment: Alignment.center,
child: SvgPicture.asset(
AppIcons.arrowDown,
),
),
onChanged: (String? val) {
setState(() => selection = val);
},
items: genderList.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width: double.infinity,
height: 21.h,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFFCBF1FF),
border: Border.all(
color: Color(0xFF00AFEF), width: 1)),
child: Text(
option,
style: TextStyle(
fontSize: 12,
color: Color(0xFF606060),
),
),
),
);
}).toList(),
selectedItemBuilder: (con) {
return genderList.map((val) {
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 13.w),
child: Text(
val,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF606060),
),
),
),
);
}).toList();
},
),
),
),
);
What I got,
DropDownButton:
DropdownMenu:
How can I get the desired design?
I was able to get the desired result using dropdown_button2
You can use dropdownXXXX parameters for editing related dropdown menu properties.
Only issue I find is that when giving dropdown menu border some radius its covered by selectedItemHighlightColor. So I have used some padding to overcome it.
SizedBox(
height: 38,
child: InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: border,
enabledBorder: border,
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
selectedItemHighlightColor: AppColors.lightBackground,
itemHighlightColor: AppColors.lightBackground,
dropdownDecoration: BoxDecoration(
border: Border.all(
color: AppColors.primary,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
dropdownElevation: 0,
dropdownPadding: const EdgeInsets.symmetric(
horizontal: 1.5,
vertical: 1.5,
),
itemPadding: EdgeInsets.zero,
customItemsHeights: [21, 21, 21],
isExpanded: true,
hint: const Padding(
padding: EdgeInsets.symmetric(horizontal: 14),
child: Text(
'Gender',
style: TextStyle(
fontSize: 14,
color: AppColors.secondaryText,
),
),
),
value: widget.value,
icon: Container(
margin: const EdgeInsets.symmetric(horizontal: 14),
height: 10,
width: 16,
alignment: Alignment.center,
child: SvgPicture.asset(
AppIcons.arrowDown,
),
),
onChanged: widget.onChanged,
items: widget.list.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 14),
child: Text(
option,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.secondaryText,
),
),
),
);
}).toList(),
selectedItemBuilder: (con) {
return widget.list.map((val) {
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 14),
child: Text(
val,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
color: AppColors.secondaryText,
),
),
),
);
}).toList();
},
),
),
),
);
I have a CircularPercentIndicator with a Text under it.
It looks like this
I want the CircularPercentIndicator to overlap into Area 1, how do I do this?
My code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
progressColor: Colors.red,
),
// Padding(
// padding:
// EdgeInsets.symmetric(horizontal: 10.0),
// child: Text("Area 1"),
// ),
Padding(
padding: EdgeInsets.only(),
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
backgroundColor: Colors.black),
),
)
],
),
using a Stack
Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 12),
child: Container(
//The Container here to fill the CircularPercentIndicator with color grey, tried using "fillColor" property and it filled it as a square
decoration: BoxDecoration(borderRadius: BorderRadius.circular(35),color: Colors.grey),
child: CircularPercentIndicator(
backgroundColor: Colors.black,
radius: 35.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
// progressColor: Colors.red,
),
),
),
Positioned(
bottom: 1,
child: Container(
color: Colors.black,
//Width is as twice as radious(Dia of the indicator) as in example image
width: 70,
height: 30,
child: Center(
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
),
),
),
),
),
],
),
i want to make scrollview in visibility but when i try to add SingleChildScrollView it still doesn't work, the result is like this
This is the result
and what I want the application will run as shown below
its main purpose is when the DropdownMenuItem is scrolled on the screen it will not be carried away
thank you, sorry if my words are a little difficult to understand
and this is my code:
class AddressScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() => _AddressState();
}
class _AddressState extends State<AddressScreen> {
String? _detail;
bool _saveButton = false;
String? valueChoose;
List listProvinsi = ['Lampung', 'DKI Jakarta'];
String? valueChoose2;
List listKabupaten = ['Bandar Lampung', 'Jakarta Timur'];
String? valueChoose3;
List listKecamatan = ['Kemiling', 'Cipayung'];
String? valueChoose4;
List listKelurahan = ['Beringin Raya', 'Bambu Apus'];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
titleSpacing: 0,
elevation: 10,
backgroundColor: Theme.of(context).primaryColor,
title: Text(
'Alamat',
style: TextStyle(fontSize: 18),
),
actions: [
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(),
),
),
},
child: Container(
height: 30,
width: 30,
margin: EdgeInsets.only(
right: 3,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(personImg),
),
),
),
),
GestureDetector(
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeScreen(),
),
),
},
child: Container(
margin: EdgeInsets.only(
right: 7,
),
child: Image.asset(iconAppbar),
),
),
],
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
height: SizeConfig.screenHeight / 4.5,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x14000000),
offset: Offset(
0,
2,
),
blurRadius: 4,
spreadRadius: 2,
),
],
),
child: Row(
children: [
SizedBox(width: SizeConfig.screenWidth / 17),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Container(
child: Text(
'Alamat Anda',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Container(
height: SizeConfig.screenHeight / 9,
width: SizeConfig.screenWidth / 2.2,
// color: Colors.grey,
child: Row(
children: [
Expanded(
child: Text(
'Perumahan Berkoh Indah Jl. Brawijaya No. 45 Gg. Mangga Rt.03 Rw.05 Kel. Arcawinangun, Kec. Purwokerto Timur, Kab. Banyumas Jawa Tengah - 53114',
style: TextStyle(
color: Colors.black54,
fontSize: 11,
),
),
),
],
),
)
],
),
SizedBox(width: SizeConfig.screenWidth / 9),
//#arjunalst2020
// ChangeButton(),
InkWell(
onTap: () {
setState(() {
_saveButton = !_saveButton;
});
},
child: Container(
margin:
EdgeInsets.only(top: SizeConfig.screenHeight / 8),
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 3,
decoration: _saveButton
? BoxDecoration(
color: Colors.grey.shade700,
borderRadius:
BorderRadius.all(Radius.circular(8)))
: BoxDecoration(
color: Colors.pink.shade800,
borderRadius:
BorderRadius.all(Radius.circular(8))),
child: Center(
child: Text(
_saveButton ? 'Simpan' : 'Ubah',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
),
],
),
),
SizedBox(height: 20),
Visibility(
visible: _saveButton,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Provinsi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue) {
setState(() {
valueChoose = newValue.toString();
});
},
items: listProvinsi.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kabupaten/Kota',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose2,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue2) {
setState(() {
valueChoose2 = newValue2.toString();
});
},
items: listKabupaten.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kecamatan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose3,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold),
onChanged: (newValue3) {
setState(() {
valueChoose3 = newValue3.toString();
});
},
items: listKecamatan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kelurahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
height: SizeConfig.screenHeight / 17,
padding: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: DropdownButton(
isExpanded: true,
dropdownColor: Colors.white,
value: valueChoose4,
iconSize: 25,
underline: SizedBox(),
style: TextStyle(
fontSize: 13,
color: Colors.black54,
fontWeight: FontWeight.bold,
),
onChanged: (newValue4) {
setState(() {
valueChoose4 = newValue4.toString();
});
},
items: listKelurahan.map((valueItem) {
return DropdownMenuItem(
value: valueItem, child: Text(valueItem));
}).toList(),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Jalan/Gang/Nama Gedung/Nama Perumahan',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
counterText: "",
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Unit/Blok/RT/RW',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Container(
margin: EdgeInsets.only(left: 23),
child: Text(
'Kode Pos',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 12,
),
),
),
SizedBox(height: 3),
Center(
child: Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.12,
child: TextField(
keyboardType: TextInputType.number,
maxLines: 1,
maxLength: 8,
style: TextStyle(fontSize: 12),
onChanged: (value) {
setState(() {
_detail = value;
});
},
decoration: InputDecoration(
fillColor: Colors.grey.shade300,
filled: true,
counterText: "",
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
),
),
),
SizedBox(height: 30),
Center(
child: Container(
width: SizeConfig.screenWidth / 1.12,
height: SizeConfig.screenHeight / 10,
decoration: BoxDecoration(
color: Colors.transparent,
border:
Border.all(color: Colors.black38, width: 0.6),
),
child: Row(
children: [
Container(
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth / 5,
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Icon(
Icons.location_on,
color: Colors.white,
size: 35,
),
),
SizedBox(width: SizeConfig.screenWidth / 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
'Tandai Lokasi Peta',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black87,
fontSize: 11,
),
),
Container(
height: SizeConfig.screenHeight / 17,
width: SizeConfig.screenWidth / 1.9,
child: Row(
children: [
Expanded(
child: Text(
'Jl. Brawijaya No,45 Gg. Mangga Kel. Arcawinangun, Kec. Purwokerto Timur, Banyumas',
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade800,
),
),
),
],
),
),
],
),
],
),
),
),
SizedBox(height: 10),
Container(
height: SizeConfig.screenHeight / 20,
width: SizeConfig.screenWidth / 1.6,
margin:
EdgeInsets.only(left: SizeConfig.screenWidth / 3.3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Pastikan lokasi yang Anda tandai di peta sesuai dengan alamat yang Anda isi di atas',
style: TextStyle(
fontSize: 9,
color: Colors.grey.shade800,
),
),
),
],
),
),
SizedBox(height: 30),
],
),
),
),
],
),
),
),
);
}
}
I'm sorry if my code is still messy or a lot of it is not effective, I'm just learning 😅
Wrap the Visibility widget with Expanded.
Expanded(
child: Visibility(
.....
),
),
If this doesn't work, wrap the main body Column with SingleChildScrollView.
NOTE: Wrapping the main Column with a Container is unnecessary.
I had the same issue multiple times.
you need to wrap your SingleChildScrollView in a Flexible.
Here is the sequence I need to do to always fix:
Flexible(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children:[Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10, top: 20, bottom: 20),
child: Text( )
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
),
),
),
),
)
],
),
),
],
),
],
),
);
}
}
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),
);