I am trying to find a better alternative to spacing my icons in Flutter, I am currently using the SizedBox(...) Widget. Although I am not sure if this is the best method to use, the sized box seems to mess up the spacing of other icons when I am adjusting the height/width. Are there any alternatives to spacing your icons inside a container. I added a picture of the UI to the post, the icons are in the menu on the left side. Login Screen Image
Widget build(BuildContext context) {
return Container(
width: 1280,
height: 800,
decoration: BoxDecoration(
color: Color.fromRGBO(227, 227, 227, 1),
),
child: Material(
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 80,
child: Container(
width: 1200,
height: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/Topbarbackground.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 652,
left: 0,
child: Container(
width: 1280,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/Rectangle112.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 0,
left: 0,
child: Container(
child: ListView(
children: [
SizedBox(
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Back.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 150.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_load.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_eject.png'),
onPressed: () {
},
),
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Light.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Utility.png'),
onPressed: () {},
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Help.png'),
onPressed: () {},
),
),
SizedBox(
height: 100.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/User.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Power.png'),
onPressed: () {},
),
],
),
You can put all the icons in a Column widget. The column widget has a parameter MainAxisAlignment, you can set this parameter to MainAxisAlignment.spaceEvenly.
See https://api.flutter.dev/flutter/widgets/Column-class.html for the Column widget
and see https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html for the MainAxisAlignment
Put the Column widget inside a Container widget.
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly
children: [
Icon()
Icon()
],
),
),
you can try to use Padding. Something like that should do the trick:
Padding(
padding: EdgeInsets.only(left:10),
child: Icon(Icons.check)
),
Related
I am trying to align the icon to the very left edge of the blue container.
The red container is just there for reference (I am using ScreenUtil).
How can I align the icon perfectly to the left edge of the blue container? So that there is no gap, not even one pixel? In this snippet I used FaIcons, however I have the same problem with the standard material icons.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50.w,
color: Colors.blue,
margin: EdgeInsets.only(left: 35.w),
child: IconButton(
iconSize: 25.w,
onPressed: () {},
icon: const FaIcon(FontAwesomeIcons.bars),
),
),
Container(
margin: EdgeInsets.only(left: 35.w),
color: Colors.red,
width: 20.w,
height: 20.w,
)
],
),
),
);}}
remove the padding from iconbutton and set constraints.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
color: Colors.blue,
margin: EdgeInsets.only(left: 35),
padding: EdgeInsets.zero,
alignment: Alignment.centerLeft,
child: IconButton(
iconSize: 25,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: const Icon(Icons.person,),
),
),
Container(
margin: EdgeInsets.only(left: 35),
color: Colors.red,
width: 20,
height: 20,
)
],
),
),
);
}
I think it's fine
Container(
width: 50.w,
color: Colors.blue,
padding: EdgeInsets.zero,
margin: EdgeInsets.only(left: 35.w),
child: IconButton(
iconSize: 25.w,
alignment: Alignment.centerLeft,
padding: EdgeInsets.zero,
onPressed: () {},
icon: Icon(Icons.menu),
),
),
I have a navigation menu which I created using a container, within my container there is a column which contains all my icons. When the user click's on certain icons or the login button at the bottom right corner I am suppose to be able to navigate/route to the next screen. I know that when we move to the next screen the menu on the left will disappear, is there a way to keep the menu bar persistent across all screens. I was assuming that I need to create a separate class/widget specifically for the menu bar and call it on each page that I route to. I am still new to flutter so I wasn't sure if there might be another approach to this problem. I also need to persist the row at the top onto all pages as well.
Widget build(BuildContext context) {
return Container(
width: 1280,
height: 800,
decoration: BoxDecoration(
color: Color.fromRGBO(227, 227, 227, 1),
),
child: Material(
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 80,
child: Container(
width: 1200,
height: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/Topbarbackground.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 652,
left: 0,
child: Container(
width: 1280,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/Rectangle112.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 0,
left: 0,
child: Container(
child: ListView(
children: [
SizedBox(
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Back.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 150.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_load.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_eject.png'),
onPressed: () {
},
),
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Light.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Utility.png'),
onPressed: () {},
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Help.png'),
onPressed: () {},
),
),
SizedBox(
height: 100.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/User.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Power.png'),
onPressed: () {},
),
],
),
It is possible to do that. You have to put the sidebar in a separate widegt and then make a widget that shows it in a Row. Then you will need to change the builder of the main file in a way that the widget with the row can be displayed. This isn't the best explanation so I recommend you to read through this article:
https://medium.com/geekculture/persistent-widget-across-all-screens-using-flutter-navigator-45e6b2e57cf7
It showcases everything and gives you a short tutorial. I hope this helped.
so I'm trying to implement a somewhat custom bottom navigation bar. I am trying to center my icons and after further investigation it is indeed working "correctly" in a way but the issue is that the bottom half of the bottom app bar gets completely ignored.
No matter what I do, the bottom half gets ignored. If I increase the size, it only makes it bigger at the top which is not what I want. How can I get the row to respect the entire bottom app bar?
Here's my code:
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 30, bottom: 33.0, right: 30.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: BottomAppBar(
color: Color(0xFF222222),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/home.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/discover.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/heart.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/user.svg',
),
),
],
),
),
),
),
Solution was to wrap BottomAppBar with SafeArea. Shoutout to Flutter discord for help on this :)
bottomNavigationBar: SafeArea(
child: Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: BottomAppBar(
color: Color(0xFF222222),
child: Container(
height: 88.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(
children: [
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/home.svg',
),
),
Positioned(
left: 23.0,
bottom: 0,
child: Image.asset('assets/images/Ellipse5.png'),
),
],
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/discover.svg',
),
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/heart.svg',
),
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/user.svg',
),
),
],
),
),
),
),
),
),
),
I am trying for hours to set my container width to its parent, which is a MaterialButton. I want the container to fill the entire width of the MaterialButton.
I tried to set the container width to "double.infitiy" or to "MediaQuery.of(context).size.width". Also played with "Expanded" etc. None of it worked. Not sure what I am doing wrong, thanks.
#override
Widget build(BuildContext context) {
return Material(
**child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: onPressed,
child: Container(
width: double.infinity,**
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(text),
SizedBox(
height: 8.0,
),
SvgPicture.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
textTopThree,
maxLines: 3,
),
],
),
),
),
);
I recommend you to replace the Material Button with InkWell, you can wrap any widget and get the onTap.
This should work:
InkWell(
onTap: () {},
child: Container(
width: double.infinity,
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: [
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
],
),
),
),
If for some reason you need to use MaterialButton, then you should delete the Container and use the properties of the Material Button, like this:
MaterialButton(
onPressed: () {},
color: Colors.greenAccent,
minWidth: double.infinity,
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
child: Column(
children: [
SizedBox(
height: 8.0,
),
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
SizedBox(
height: 8.0,
),
],
),
),
I did a Gridview.count for rendering 6 buttons in 2 columns and 3 rows, it's not rendering and instead of the components, it shows yellow and black stripes. I already set the height and the width, all wrapped in a container.
return Scaffold(
body: Container(
height: 450.0,
width: double.infinity,
child: GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)));
}
}
Please, someone knows why it's not rendering properly? or have an alternative widget that might work better? Thanks.
This widget is imported in this one:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF88B4E0),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Help and FAQ',
style: TextStyle(fontSize: 18.0, color: Colors.white)),
centerTitle: true,
actions: <Widget>[
SearchButton(),
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Positioned(
top: 75.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
SizedBox(height: 20.0),
Testing(),
],
),
)),
]),
]),
);
}
void moveBack() {
Navigator.pop(context);
}
}