Flutter: How to align widget to the topRight of column? - flutter

I'm trying to align my more options button to the top right corner in in my column, according to the this SO answer.
How to align single widgets in Flutter?
Here's my code.
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
Align(alignment: Alignment.topRight,
child: IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),)),
],
),
),
);
And if I change the order of align and text, this happens.
I want to display my button on the top right corner while keeping Text widget on the center top, but align widget seems to take whole line(row).
Is there a way to do correctly achieve that, or do I need to wrap them both in a row?

I've used Stack and Positioned widget to achieve that effect.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
),
Positioned(
top: 0,
right: 0,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
),
],
);
}

You need to wrap with Row if you want to make them in the same Column
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Text(
'Day 1',
style: TextStyle(
color: Colors.white,
),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
],
),
],
),
),
);

Related

flutter problem: How to make button with centered text and right side Icon

I want to make a button, In this button I want a text and icon both but text should be in center and icon will be right side.
this is code of button.
bottomNavigationBar: Padding(
padding:
const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: FlatButton(
onPressed: () {
_controller.nextPage(
duration: const Duration(milliseconds: 200),
curve: Curves.easeIn,
);
if(_currentPage + 1 == splashData.length){
Navigator.push(context,
MaterialPageRoute(builder: (context) => HomePage()));
}
},
child: Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
SizedBox(width: 50,),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor,),
)
],
),
color: skyBlue,
),
),
),
I want like this button
but is becoming like this.
Try below code, used Opacity widget and set opacity:0
Note: Don't used FlatButton its depricated by Flutter used instead of ElevatedButton, TextButton
Refer here to new buttons
ElevatedButton(
onPressed: () {
//write your onPressed function here
print('Pressed');
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Opacity(
opacity: 0,
child: Icon(Icons.arrow_forward),
),
Text('Next'),
Icon(Icons.arrow_forward),
],
),
),
Your result screen->
You can use Stack instead of Row to achieve easily.
Inside Stack you can use Positioned(right: 10, child: Icon()) also.
Stack(
alignment: Alignment.center,
children: const [
Text(
'Next',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.arrow_forward, color: Colors.white,),
)
],
)
We have more than two ways to achieve it. I have given two easiest option to achieve it.
You can use Expanded (and play with the flex property if needed).
Also add an Align
For instance:
Row(mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(),
Expanded(
child: Text(
"Next",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(Icons.arrow_forward,color: whiteColor),
),
),
),
],
),

I want to make Responsive appbar in flutter. According to the design that I have

This is the design of appbar that I want to create using flutter and that should be responsive for all types of mobile devices and Tablets. Please let me know what to do to achieve this.
Widget _buildHeader() {
return Container(
height: MediaQuery.of(context).size.height* .22,
width: MediaQuery.of(context).size.width * 1,
color: Color(0xFF0A182E),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10, top: 40),
child: FlatButton(
onPressed: () {
print("homebtn clicked..!!"); //Home button
},
child: Text(
"Home",
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
),
SizedBox(width: MediaQuery.of(context).size.width *.47,),
FlatButton(
onPressed: () {
print("profilebtn clicked");
},
shape: CircleBorder(),
child: Container(
margin: EdgeInsets.only(top: 20),
height: MediaQuery.of(context).size.height*.07,
width: MediaQuery.of(context).size.width*.14,
child: CircleAvatar(
backgroundImage: AssetImage("images/profilebtn.png"),
),
),
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * .04,),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: FlatButton(
onPressed: () {
print("Roomsbtn clicked.!");
},
child: Container(
child: Text(
"ROOMS",
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
FlatButton(
onPressed: () {
print("Devicesbtn clicked.!");
},
child: Container(
child: Text(
"DEVICES",
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(width: MediaQuery.of(context).size.width *.27,),
Transform.scale( //add Button
scale: .65,
child: FloatingActionButton(
onPressed: () {
print("Redplusbtn clicked.!");
_onButtonPressed();
},
child: Icon(
Icons.add,
size: 45,
),
backgroundColor: Colors.red,
),
),
],
),
],
),
);
}
This is what I have tried but I find this approach is lengthy and not responsive.I have tried in other devices and appbar is not responsive so I want to make this appbar in a Standard way.
I think this is way better solution. First of all there is no need to call media query to find a width and height. Another thing is that you can use AppBar widget and rework it to the way you like. Look at this example and amend it to your needs..
Scaffold(
appBar: AppBar(
title: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text('Hello'), Icon(Icons.email)],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text('Option1'),
Text('Option2'),
],
),
Icon(Icons.language)
],
)
],
),
),
body: Container())
I would try putting the higher elements (title and picture) on the AppBar and the lower elements (Room, devices and plus icon) on a TabBar.
AppBar: https://api.flutter.dev/flutter/material/AppBar-class.html
TabBar: https://api.flutter.dev/flutter/material/TabBar-class.html
You can identify the customer device first using this plugin https://pub.dev/packages/device_info
the next steps, you can set the condition of the appbar in each device.
for more details you can check this link https://iiro.dev/2018/01/28/implementing-adaptive-master-detail-layouts/

Flutter - Push FlatButton at near bottom

I want to push the flatbutton.icon near bottom but not in bottomNavigationBar.
I want also to make it dynamic so that i can add more buttons vertically if needed.
I'm thinking of using Stack then positioned but i'm not familiar on how to implement it.
return MaterialApp(
home: Scaffold(
backgroundColor: Theme.of(context).accentColor,
body: Center(
child: Column(
children: <Widget>[
AvatarGlow(
endRadius: 90,
duration: Duration(seconds: 2),
glowColor: Colors.white24,
repeat: true,
repeatPauseDuration: Duration(seconds: 2),
startDelay: Duration(seconds: 1),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: CircleAvatar(
backgroundColor: Colors.grey[100],
child: FlutterLogo(
size: 50.0,
),
radius: 50.0,
)),
),
DelayedAimation(
child: Text(
"PICKNIC",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: Colors.white),
),
delay: delayedAmount + 1000,
),FlatButton.icon(
onPressed: () {
Navigator.of(context).pushNamed('/Pages', arguments: 2);
},
padding: EdgeInsets.symmetric(vertical: 14),
color: Theme.of(context).primaryColorDark.withOpacity(0.1),
icon: new Icon(MdiIcons.facebook, color: Theme.of(context).primaryColorDark),
shape: StadiumBorder(),
label: Text(
'Login with Facebook',
textAlign: TextAlign.start,
style: TextStyle(
color: Theme.of(context).primaryColorDark,
),
),
),
],
),
),
),
);
You will solve using Expanded widget.
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
),
),
You can check following solutions:
If you need 1 button, simply use FloatingActionButton docs
If you need multiple suggest this article (Column with FABs)
And animated solution looks more user friendly package
If you want to have the content centered in the available space above the buttons, you could put your content centered in a Expanded widget and put the buttons below it, like this:
Center(
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AvatarGlow(...),
DelayedAimation(...),
],
),
),
FlatButton.icon(...),
FlatButton.icon(...),
],
),
)
If you want to have the content centered in the entire screen and the buttons at the bottom, you could use a Stack, like this:
Stack(
children: <Widget>[
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AvatarGlow(...),
DelayedAimation(...),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton.icon(...),
FlatButton.icon(...),
],
),
)
],
)

Layout in list tile - flutter

Current output:
Expected output:
Code:
SizedBox(
width: 380,
height: 180,
child: Swiper(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Expanded(
child: Card(
child: ListTile(
title: Text(
'${items[index].title}',
),
subtitle: Text(
'${items[index].body}',
),
trailing: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: HexColor("#0087a8"),
child: IconButton(
icon: Icon(Icons.add),
],
),
),
),
)
],
);
},
viewportFraction: 0.8,
scale: 0.9,
control: SwiperControl(color: Colors.white),
),
);
I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.
As already pointed out, you shouldn't use a ListTile for this, as you want to use more than just a title, subtitle for your content.
The reason I've picked a Stack over a Column here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.
I believe this is what you're looking for.
class MyListTile extends StatelessWidget {
const MyListTile({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 180.0,
color: const Color(0xff0087a8),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: const Color.fromRGBO(19, 12, 117, 1.0),
),
child: Stack(
children: <Widget>[
Text(
'EUR - USD',
style: Theme.of(context).textTheme.display2.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Forex',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: const Color(0xff0087a8),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 50.0,
),
),
)
],
),
),
);
}
}
Try this code
Container(
height: 180,
width: double.infinity,
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'EUR/USD',
style: TextStyle(fontSize: 40),
),
Text('FOREX', style: TextStyle(fontSize: 20)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blueAccent,
child: IconButton(
onPressed: () {
print('On Pressed');
},
icon: Icon(Icons.add),
)),
],
)
],
),
),
),
)
Use custom widget for list item OR column from below code for single view. To align left and right you have to put your view in 'Align' as in below -
class _ItemsState extends State<Items> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SizedBox(
width: 380,
height: 160,
child: Card(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return
Padding(padding: EdgeInsets.all(10.0),child: Column(children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Column(children: <Widget>[
Text(
'title',
style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
),
Text(
'body',
style: TextStyle(fontSize: 14.0), )
]),
),
Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
maxRadius: 20.0,
backgroundColor: Colors.blueGrey,
child: IconButton(
icon: Icon(Icons.add,
color: Colors.white,),
))
)
]));
}))));
}
}

Expanded Raisebutton flutter

I am trying to make the below two raised button fill the available width evenly.
My Column:
Padding(
padding: const EdgeInsets.only(bottom:18.0),
child: Text(
'Which language Do you prefer',
style: TextStyle(
color: Colors.white,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ButtonTheme(
minWidth: 150.0,
height: 50.0,
child: RaisedButton(
color: Theme.of(context).primaryColorLight,
child: Text('French'),
onPressed: () {},
),
),
ButtonTheme(
minWidth: 150.0,
height: 50.0,
child: RaisedButton(
color: Theme.of(context).primaryColorLight,
child: Text('English'),
onPressed: () {},
),
)
Has a gap
Your ButtonTheme inherits colors from ThemeData. Change colors or use a MaterialButton.
Tip: Wrap your buttons in an Expanded widget.
add "crossAxisAlignment" propriety to the row that holds the tow buttons
crossAxisAlignment: CrossAxisAlignment.stretch