Related
I tried adding a bottom navigation bar to my project. As soon as I have finished the bottom navigation bar - all my widgets under the main body isn't displaying. Android studio is not showing any error but still am getting the blank screen with only navigation bar at the bottom.
If I remove the bottom navigation bar all my widgets(container, image) under the body automatically start working as normal.
I am not getting what's wrong with the navigation bar.
I tried my best looking for the issue but can't found any I looking for a help on this. I attached my code below
Code:
import 'package:flutter/material.dart';
class Dashboard extends StatefulWidget {
#override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: bottomBar(context),
body: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFffd194), const Color(0xFF70e1f5)],
begin: FractionalOffset.topLeft,
end: FractionalOffset.bottomRight,
stops: [0.1, 1.0],
tileMode: TileMode.clamp),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(
image: AssetImage('assets/bout1.png'),
),
],
),
),
);
}
//widget for bottom navigation bar starts here
Widget bottomBar(BuildContext context) {
return Align(
alignment: Alignment(-1, 1),
child: Container(
padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
height: 60,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 1,
),
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: IconButton(
highlightColor: Colors.red,
splashColor: Colors.greenAccent,
icon: Icon(
Icons.home,
color: Color(0xffa1a5b5),
),
iconSize: 28,
onPressed: () {
Navigator.of(context).pushNamed('/Login');
},
)),
Expanded(
flex: 1,
child: IconButton(
iconSize: 28,
icon: Icon(
Icons.swap_horiz,
color: Color(0xffa1a5b5),
size: 28,
),
onPressed: () {},
),
),
Expanded(
flex: 1,
child: IconButton(
icon: Icon(
Icons.show_chart,
color: Color(0xffa1a5b5),
),
iconSize: 28,
onPressed: () {},
),
),
Expanded(
flex: 1,
child: IconButton(
iconSize: 28,
icon: Icon(
Icons.notifications_none,
color: Color(0xffa1a5b5),
),
onPressed: () {},
),
),
Expanded(
flex: 1,
child: IconButton(
iconSize: 28,
icon: Icon(
Icons.person_outline,
color: Color(0xffa1a5b5),
),
onPressed: () {},
),
),
],
),
),
);
}
}
Whenever you see content being hidden because of adding something else, it's usually because that 'something else' is overlapping your content. Your content is all there, it's just hidden behind the Align widget.
I figured this out by wrapping the Align widget in a Container widget with color Colors.yellow:
Widget bottomBar(BuildContext context) {
return Container(
color: Colors.yellow,
child: Align(...),
);
}
When I remove the Align widget, everything seems to work correctly:
I guess you had added the Align widget earlier to ensure that the bottomBar sticks to the bottom but using the bottomNavigationBar parameter of the Scaffold to add your bottom navigation bar widget already does that for you.
I added circular buttons in my flutter mobile app but when I tap or click on them, those buttons gets converted to square buttons. I am adding my code below, please let me know what I am doing wrong, your help will be highly appreciated. Thanks,
child: Material(
color: Colors.black,
shape: CircleBorder(),
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.white12,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.home),
color: Colors.white70,
onPressed: () {
bool isGR = Game.of(context).isGameRunning();
if (isGR) {
Game.of(context).pause();
}
TapboxA.of(context).backToSplash();
},
),
),
),
),
I am adding images as well below:
When I design this app layout in device with larger display It works perfectly fine(1920 x 1080) But when I run app in device with smaller screen bottom buttons are not showing..What can I do for this? Is mediaquery support for column widget...? Should I have to use another method instead of Mediaquery?
This is main dart....//Run app not included//
return ResponsiveWidget(
builder: (context,constraints){
return Stack(
children: <Widget>[
new Container(
decoration:new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(_Image()()),
fit: BoxFit.cover,
),
),
),
Scaffold(
backgroundColor:Colors.transparent,
appBar:AppBar(
backgroundColor:Colors.transparent,
elevation:0.0,
),
drawer:Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header',
style:TextStyle(
fontSize: 30.0,
),
),
decoration: BoxDecoration(
color: Colors.green[300],
),
)],
),
),
body:Column(
children: <Widget>[
Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(width:10,height:10,),
Text(
"NAME",
style:TextStyle(
fontSize:40.0,
fontWeight:FontWeight.bold,
color:Colors.white,
),
),
SizedBox(width:10),
],
),
SizedBox(height:20),
GestureDetector(
onTap:(){
print("Clicked");
},
child: CircleAvatar(
radius:80,
backgroundImage:_decideImageView(),
),
),
SizedBox(height: 30,),
Text("Text",
style:TextStyle(
fontStyle:FontStyle.italic,
fontSize:15,
color:Colors.white,
),
),
SizedBox(height: 10,),
Text("Text",
style:TextStyle(
fontFamily:'mrsmonster',
fontSize:20,
color:Colors.white,
),
),
SizedBox(height:50,),
FlatButton(child:Text(
"TExt",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#149da5'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
SizedBox(height:10,),
FlatButton(child:Text(
"Text",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#f4856b'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
],
),
)
]
);
);
This is Responsive Widget
import 'package:app/SizeInformation.dart';
import 'package:flutter/material.dart';
class ResponsiveWidget extends StatelessWidget {
final AppBar appBar;
final Drawer drawer;
final Widget Function(BuildContext context,SizeInformation constraints) builder;
ResponsiveWidget({#required this.builder,this.appBar,this.drawer});
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
var orientation = MediaQuery.of(context).orientation;
SizeInformation information = SizeInformation(width,height,orientation);
return Stack(children: <Widget>[
Scaffold(
drawer:drawer,
appBar:appBar,
body: builder(context,information),
),
]
);
}
}
You should use Stack inside a Scaffold body and not wrapping Scaffold with Stack. You have to use only one Scaffold in one screen. What you've done is just wrong... No wander it is not working. Whatever is in scaffold body will be automatically adjusted to your screen resolution... therefore no need to do it manually. Here is a question how to set background image without using Stack widget Flutter SDK Set Background image so there is no need to even use Stack
I am trying to implement a button without margin.
My code is :
#override
Widget build(BuildContext context) {
return new AppState(
child: new Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body:
ButtonTheme(
buttonColor: Color(0xFF031e39),
minWidth: double.infinity,
child: FlatButton(
color: Color(0xFF81A483),
onPressed: () {
launchSearch();
},
child: Text('Search',style: TextStyle(color: Colors.white),),
),
)
),
);
}
The result is :
I have tried all different ways but I cannot figure out a solution so the button has not margin.
If I put a widget on top of my button in a column I get the same results:
How can I have a FlatButton without any margin ?
According to the source. It looks like Flutter pads out buttons that are smaller than the target tap size (48 x 48), you can get around it by:
Make your button height larger than or equal to 48
or
Add materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, to your FlatButton.
I got it but making some modifications.
Instead of using a ButtonTheme and a FlatButton I used a Container and a FloatingActionButton
With Container you can set the size in the screen. With FloatingActionButton you can set the position of the button in the Scaffold, which in this case is in all the screen.
To make the button flat I putted the attribute elevation to 0.0, so the button looks like flat.
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body: new Container(
width: double.infinity,
child: FloatingActionButton(
backgroundColor: Color(0xFF81A483),
shape: new RoundedRectangleBorder(),
elevation: 0.0,
onPressed: () {
print("entra");
},
child: Text(
'Search',
style: TextStyle(color: Colors.white),
),
),
)
I hope this is helpful for you
use:
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
FlatButton(
textColor: GFColors.WHITE,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"BLOG",
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.normal
),
),
onPressed: () {
},
),
More often than not, the icons I select to display will not show up (or will show up incorrectly) throughout my entire application. I'm not importing any new icons, all of the ones I use are selected from Flutter's default library.
On Android devices it is pretty much hit-or-miss; either all of the icons show up correctly, or they all give the same error placeholder. Like I said its much more often that they do not show.
iOS is a different story, while they still usually don't work correctly, it sometimes gives random emojis instead of the correct icon or error boxes. As you can see in the second picture, it placed a forward arrow emoji in place of what should have been the list-like icon to open the Drawer. Previously, the Close icon inside the Drawer was displaying as the strong arm emoji.
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.format_align_center),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
title: Text(
"INFORMATION",
style: TextStyle(
fontFamily: 'Titillium SemiBold',
fontSize: 37.0,
),
),
centerTitle: false,
backgroundColor: Colors.white,
elevation: 0.5,
),
drawer: Drawer(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 150.0,
color: Colors.white.withRed(191).withGreen(194).withBlue(200),
child: FittedBox(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 8.0),
child: Text(
"VITALITY PRO",
style: TextStyle(
color: Colors.white
),
),
)
)
),
SizedBox(height: 10.0),
ListTile(
title: Text(
"TERMS & CONDITIONS",
style: TextStyle(
fontSize: 18.0,
),
),
onTap: () => Navigator.pushNamed(context, '/terms'),
),
Divider(),
ListTile(
title: Text(
"PRIVACY POLICY",
style: TextStyle(
fontSize: 18.0
),
),
onTap: () => Navigator.pushNamed(context, '/privacy'),
),
Divider(),
SizedBox(height: 10.0),
ListTile(
title: Text(
"CLOSE",
style: TextStyle(
fontSize: 18.0
),
),
trailing: Icon(Icons.clear),
onTap: () => Navigator.pop(context),
),
SizedBox(height: 10.0),
Divider(),
Flexible(
fit: FlexFit.loose,
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text(
"LOGOUT",
style: TextStyle(
color: Colors.black38,
),
),
onPressed: () => Navigator.pushNamed(context, '/origin'),
),
Text("#Copyright 2018, ISPA Technology, LLC"),
],
),
),
),
],
),
),
),
That's a known issue that was fixed since.
Run
flutter upgrade
to get a newer Flutter version where this fix is included.