I want to show a logo on app bar and am achieving it through the following code.
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 3,
title: Align(
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Image.asset(
'assets/logo/logo.jpg',
fit: BoxFit.fitWidth,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.2,
),
),
]),
)),
Output am getting
The problem here is The icon is centered how can I stick to the right like this
Desired Output
As in the above code I already tried
alignment: Alignment.centerLeft,
crossAxisAlignment: CrossAxisAlignment.start,
Still not working anyone have any idea? Please support.
It looks like that you are almost there with your code. Here is the snippet that'll place your logo in left inside appbar.
AppBar(
backgroundColor: Colors.white,
elevation: 3,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset(
'assets/nividata-logo.png',
fit: BoxFit.fitWidth,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.2,
),
])),
Okay, as you can see I've just used row and gave mainAxisAlignment to start, so that'll place every element inside row from start.
If I change this to below code, then It'll start placing elements from right side (end).
mainAxisAlignment: MainAxisAlignment.end,
You can also check below screenshots for results that I'm getting with above code.
This is simply because of the Default Leading applied to The app bar as you navigate from the other page and somehow that leading icon is in white color.
If you enable the Show Boundaries in the Dev tools you can see the Default leading icon is taking that blank spot.
There are two possible outcomes to this problem.
You can change the color to any visible color.
- This will help the user to navigate back.
You can try to set the "automaticallyImplyLeading" property to "false" in the "Appbar" Widget.
- This will disable the default leading icon in the Appbar.
Try below code hope its help to you. just change your widgets inside action tag(like your image)
Scaffold(
appBar: AppBar(
title:Image.network(
'https://image.shutterstock.com/image-photo/kiev-ukraine-may-03-2015-260nw-275974145.jpg',
),
automaticallyImplyLeading:false,
actions: <Widget>[
Icon(Icons.add),
Icon(Icons.person),
],
),
)
Your Result Screen->
Yes, got the answer from one of the comment.
automaticallyImplyLeading:false.
This fixed the issue
Related
I have the following widget StackedIcons
reuturn Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(), Positioned(left: 15, child: PlusOne())
]),
);
which I want right aligned inside another widget
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [StackedIcons(match: match)]
)
and this is what I get
This looks good in terms of what I want to achieve (the plus one on top of the user avatar). However it overflows the parent container.
If I use right offset for positioned the order of the icons will be inverted and I don't want that.
If possible I would like to specify to Stack place the element below the current one (rather than on top).
The output I want is to have this widget rigth aligned without going over the padding of the parent. If I remove the Clip.none behaviour I get
A possible solution might be to place your PlusOne inside the green Container, and then give the Avatar some offset on the right instead.
return Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(right: 15, child: CircleAvatar()),
PlusOne(),
]),
);
I'm not sure how this would affect things if you were to have multiple avatars and then the plus icon, but if you haven't tried this, it might work for you.
What is the best way to build a "nested bottom sheet" which behaves like this:
https://dribbble.com/shots/14139422-Mobile-banking-app-interactions?
Do I have to use NestedScrollView or CustomScrollView, or a completely different approach?
Update :
This is my result using SlidingUpPanel, but I still have two problems:
When sliding up the panel, the green and red containers stay behind the panel and do not scroll out of view at the top.
In landscape mode the containers are higher than the device, so this approach does not work. I need the panel to be attached to the bottom of the containers, so it is only visible when scrolling down.
Code:
SafeArea(
child: Scaffold(
body: SlidingUpPanel(
minHeight: MediaQuery.of(context).size.height - 479,
maxHeight: MediaQuery.of(context).size.height - 79,
panel: SingleChildScrollView(
child: Column(
children: [Text('Sliding Panel')],
),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 100,
color: Colors.green,
),
Container(
height: 300,
color: Colors.red,
)
],
),
),
),
),
);
Result:
I believe there is a Widget for what you want to do, since there is a widget for everything in Flutter. here is the link of the package
NOTE : you can also set minimum height of the widget when collapsed in order to control how much of the widget you can show when it is collapsed.
And here is the demo :
I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button.
I don't know if there is a widget able to do this or need some code...
Any suggest or help will be great! (this was my very first post ever, sorry if there is something wrong about it!!)
Thanks.
Do something like this.
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
color: Colors.grey,
),
],
),
Positioned(
top: 280,
left: 50,
right: 50,
child: RaisedButton(
color: Colors.white,
child: Text("Your Button"),
onPressed: () {},
),
)
],
),
you will get
Let me know if it works
One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.
On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.
I can't figure out what's giving this button extra width/padding. The image used is cropped so has no spacing to the left or right and you can see in the attached screenshot from the dev tools that it doesn't occupy the width. Somehow the button has extra width but I don't know where it's coming from.
I have another identical button next to it and with the added space it's causing overflow.
Changing the image size with the width parameter doesn't affect the amount of space the material button takes up either. It seems to be a fixed size.
This is the whole code:
Scaffold(
body: Row(
children: <Widget>[
MaterialButton(
child: Image.asset("images/male.png", width: 33)
)
],
),
);
I also tried other buttons like FlatButton and RaisedButton but they are the same with this additional width/padding. I also tried setting padding with on the button to EdgeInsets.all(0) but that doesn't change anything either.
The extra space is from the minWidth default value which is taken from the current ButtonTheme (you can see that from the MaterialButton source code). You can remove the extra space by adding minWidth to 0 and padding to 0 to your MaterialButton widget. Something like this:
Scaffold(
body: Row(
children: <Widget>[
MaterialButton(
padding: EdgeInsets.all(0),
minWidth: 0,
child: Image.asset("images/male.png", width: 33),
)
],
),
);
Use a container, where you can specify the width
Scaffold(
body: Row(
children: <Widget>[
new Container(
width: 33,
child : MaterialButton(
child: Image.asset("images/male.png")
),
],
),
);
I would like to have a static bottom bar for my app.
This bar should content the hour of a device in the middle, and the temperature read by another device on the right side.
My problem is just about the positioning/sizing.
When I start it (with android studio, on real or virtual device), it doesn't work : the preview is not what I excepted, the dimensions I choose seem to have changed.
But when I hot-reload it, it becomes exactly what I want like this :
The problem is that the final app is not the hot-reloaded one ..
I may have identify the problem,
I use a MediaQuery.of(context).size and a builder to obtain the context in order to fit with all the devices considering the size. This solution must be a dirty one but I don't find anything else..
Here is my code, hope the situation is clear...
return new MediaQuery(
data: MediaQueryData.fromWindow(ui.window),
child: Builder(
builder: (context) {
return new Builder(
builder: (
context) {
return
new MaterialApp(
home: new DefaultTabController(
length: 6,
child: Scaffold(
bottomNavigationBar:
new Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height*0.1,
alignment: Alignment.centerRight,
child: new Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width* 2/3,
alignment: Alignment.centerRight,
child: new Row(
children: <Widget>[
new Expanded(child: new Container(
color : Colors.yellow,
child: new Text('22 : 22' ),
alignment: Alignment.center,
)),
new Expanded(child:new Container(
color: Colors.pink,
child: new Text(' 37.8 °C'),
margin: new EdgeInsets.all(MediaQuery.of(context).size.width*0.02),
alignment: Alignment.centerRight,
))
],
),
),
),
Thank you for helping.
You could use a Stack and position one of the widget absolute over the other one:
new Stack(
children: <Widget> [
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
new Text(time),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget> [
new Text(temperature)
],
),
],
),
where time & temperature are variables that were set within the state (Stateful Widgets). Then just include it in bottomNavigationBar.
I eventually added my previous code in a StatelessWidget and call it in the bottomNavigationBar field of the Scaffold : it does the job.
And I call MediaQuery.of(context) within the StatelessWidget created
Thank you.