Related
I want to achieve that specific result in UI but I think there is thing i am missing in the Row/column component.
the UI I want to achieve is as follows:
but i am able to do that change:
as you can see there are many gaps between the popup menu button and the right side width.
this the paint shows me:
how much width popUpMenuButton is getting which cause the UI to accommodate that space
i tried the following way to achieve that:
Row(
children: [
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
date.toString(),
style: cTextStyleBold,
),
const SizedBox(
height: 20,
),
Text(
"${fromTime!} - ${toTime!}",
style: cTextStyle,
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Text(
approvedText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approved == "1" ? true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
Row(
children: [
Text(
supervisorShiftText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approvedBySupervisor == "1" ?
true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
],
),
Row(
children: [
PopupMenuButton<String>(
position: PopupMenuPosition.under,
onSelected: handleClick,
itemBuilder: (BuildContext context) {
return {'Edit', 'Delete'}.map((String choice)
{
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
),
],
),
I want the single selected radio button widget and text widget in the same row. It won't work even if I try to wrap it with the row. I want it like the image below.I want this, But I got this. Thanks in advance!
Column(
children: [
RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
Container(
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold)))),
],
),
You have to use Row widget and wrap each child in it with Expanded, because RadioListTile want to take the width of its parent, and Row wait its children to render, so it can know its own width.
By using Expanded the Row know that it must take all the possible with, and it's children can fit correctly in it.
try this update i hope it will fix the issue
Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 50,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
Container(
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
In flutter, How to set a single radio button checked by default, like below?
What I want
,
What I get
Center(
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 30, top: 10),
child: SizedBox(
width: 150, // <-- match_parent
height: 45,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
You could just set the value and groupValue to be the same.
value: "English",
groupValue: "English",
or
value: "english",
groupValue: "english",
I am trying to implement a Filter Feature for my Match Lobbies, but the thing is as soon as I try to search any lobbies in the CustomTextField, my phone's on-screen keyboard shows up which makes my Bottom Overflow by 121 pixels.
I am posting a screenshot of the Filter Feature before and after the overflow to have a clear idea.
Please ignore the Circular Logo Error in the photo, that is just the logo display error due to the path not provided.
Code:
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: BottomSheet(
onClosing: () => {},
builder: (_) {
return SizedBox(
height: 595.h,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.w),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
padding: EdgeInsets.only(
top: 34.h,
left: 40.w,
),
child: Text(
'Filter',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontSize: 28.sp,
fontWeight: FontWeight.w600,
),
),
),
),
Container(
decoration: BoxDecoration(
color: const Color(0xFF2B2B3D),
borderRadius: BorderRadius.circular(
10.r,
),
),
child: CustomTextField(
hintText: 'Host Username',
controller: _controller,
onChanged: (p0) => print(p0),
),
),
SizedBox(
height: 12.h,
),
Container(
height: 150.h,
decoration: BoxDecoration(
color: const Color(0xFF2B2B3D),
borderRadius: BorderRadius.circular(
10.r,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 200.w,
child: RadioListTile<String>(
activeColor: Colors.white,
title: Text(
"By Team",
style: Theme.of(context).textTheme.bodyMedium,
),
value: "team",
groupValue: selectedMatchFilter,
onChanged: (String? value) => setState(() {
selectedMatchFilter = value;
}),
),
),
SizedBox(
width: 200.w,
child: RadioListTile<String>(
activeColor: Colors.white,
title: Text(
"By League",
style: Theme.of(context).textTheme.bodyMedium,
),
value: "league",
groupValue: selectedMatchFilter,
onChanged: (String? value) => setState(() {
selectedMatchFilter = value;
}),
),
),
],
),
),
SizedBox(
height: 100.h,
child: Row(
children: [
Expanded(
child: ListView.builder(
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => SizedBox(
height: 100.h,
width: 125.w,
child: TeamLogo(
id: 1,
imgPath: "Barcelona",
teamName: "Barcelona",
selected: false,
notifyParent: () {},
),
),
),
),
],
),
),
],
),
),
Container(
padding: EdgeInsets.only(top: 5.h),
child: const Text(
"Matchday",
textAlign: TextAlign.center,
),
),
Column(
children: [
RadioListTile<DateTime>(
activeColor: Colors.white,
title: Text(
"Today",
style: Theme.of(context).textTheme.bodyMedium,
),
value: widget.today,
groupValue: selectedMatchDateFilter,
onChanged: (DateTime? value) => setState(() {
selectedMatchDateFilter = value;
}),
),
RadioListTile<DateTime>(
activeColor: Colors.white,
title: Text(
"Tomorrow",
style: Theme.of(context).textTheme.bodyMedium,
),
value: DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 1),
groupValue: selectedMatchDateFilter,
onChanged: (DateTime? value) => setState(() {
selectedMatchDateFilter = value;
}),
),
RadioListTile<DateTime>(
activeColor: Colors.white,
title: Row(
children: [
DropdownButton2<String>(
isExpanded: true,
buttonHeight: 30.h,
buttonWidth: 220.w,
items: const [
DropdownMenuItem<String>(
value: "",
child: Text("Till Date"),
),
DropdownMenuItem<String>(
value: "",
child: Text("Precise Date"),
),
],
),
1 == 2
? Checkbox(
value: true,
onChanged: (bool? _value) {},
)
: IconButton(
icon: const Icon(Icons.calendar_today),
onPressed: () => showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2022, 11, 16),
lastDate: DateTime(2023, 1, 1),
),
),
],
),
value: DateTime.now(),
groupValue: selectedMatchDateFilter,
onChanged: (value) {},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("Premium"),
Switch(
onChanged: (bool? s) => setState(() {
isPremiumFilter = s ?? false;
}),
value: isPremiumFilter,
activeColor: const Color(0xFF182A54),
inactiveThumbColor: Colors.white,
activeTrackColor: const Color(0xFFD9D9D9),
inactiveTrackColor: const Color(0xFFD9D9D9),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
onPressed: () {},
child: const Text("Apply"),
),
TextButton(
onPressed: () {},
child: const Text("Clear All"),
),
],
),
],
),
),
);
},
),
);
}
you can also wrap your widget with the following to force a full screen constrains on it, and make it scrollable:
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
child: /*your widgets*/,
),
)
A quick fix for your case.
Add the resizeToAvoidBottomInset property in your Scaffold like this:
Scaffold(
resizeToAvoidBottomInset: true,
/*...*/
);
Im trying to have a navigation bar with a slider and some buttons on a bottom app bar, but i found that when i initially added in my slider widget it caused my BottomAppBar to go to the top of my screen and so without the use of main axis alignment it will not remain at the bottom. is there a reason that the slider or my layout causes such an issue ?
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Title"),
backgroundColor: Colors.black87,
centerTitle: true,
actions: <Widget>[
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.arrow_back),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
//Title( color: Colors.black,),
// title:Text("Title_Data"),backgroundColor: Colors.blueAccent,centerTitle: false,
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(
Icons.bookmark_border_outlined,
size: 25,
),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.workspaces_filled),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.brightness_4_outlined),
shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
),
],
),
bottomNavigationBar: Column(
//mainAxisAlignment: MainAxisAlignment.end,
children: [
BottomAppBar(
color: Colors.black87,
child: new Row(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.fast_rewind),
shape:
CircleBorder(side: BorderSide(color: Colors.transparent)),
),
Text(
"0",
style: TextStyle(
color: Colors.white70,
fontSize: 16,
fontWeight: FontWeight.bold),
),
Slider(
inactiveColor: Colors.deepPurpleAccent,
value: _currentSliderValue,
min: 0,
max: 100,
divisions: 100,
label: _currentSliderValue.round().toString(),
activeColor: Colors.tealAccent,
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
Text(
"100",
style: TextStyle(
color: Colors.white70,
fontSize: 16,
fontWeight: FontWeight.bold),
),
FlatButton(
textColor: Colors.white,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.fast_forward),
shape:
CircleBorder(side: BorderSide(color: Colors.transparent)),
),
],
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Image Goes Here",
softWrap: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
'https://i.imgur.com/KqM0AMm.jpg',
width: 400,
errorBuilder: (BuildContext context, Object exception,
StackTrace stackTrace) {
return FlatButton(
textColor: Colors.black,
minWidth: 1,
onPressed: () {},
child: Icon(Icons.error),
shape: CircleBorder(
side: BorderSide(color: Colors.transparent)),
);
},
)),
],
),
);
}
}
With no alignment
mainAxisSize: MainAxisSize.min,
bottomNavigationBar: Column(
//mainAxisAlignment: MainAxisAlignment.end,
//mainAxisSize: MainAxisSize.min,
children: [
BottomAppBar()
]
)
The problem is that if BottomAppBar is the first child of bottomNavigationBar and it has columns as a children, it will cause this issue. mainAxisSize: MainAxisSize.min should be set to explicitly changing default positioning behavior of the widget like the following:
bottomNavigationBar:
Column(
mainAxisSize: MainAxisSize.min, // this column and this line solves the issue
children: [
BottomAppBar(
child: Padding(
padding: const EdgeInsets.all(8),
child: OverflowBar(
overflowAlignment: OverflowBarAlignment.center,
alignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// your columns here
Column(children :[
]),
Column(children :[
]),
Column(children :[
]),
)),
])),