Trying to make a card menu that is a quick link to app's main sections. I tried using TextButton.Icon ( but since the word count varies too much from 8-letter word to 19-letter word, the font size becomes too small for the shorter word, so the aesthetics looks weird.
I'm thinking to make the label of the button to two lines as shown in the JPEG attached.
Wondering if this is possible with a container inside a material button instead?
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class QuickMenu extends StatelessWidget {
const QuickMenu({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: false, //to remove back button
backgroundColor: Colors.white,
flexibleSpace: Container(
margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
height: 55.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image(
image: AssetImage('images/logo.png'),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_outlined,
size: 35.0,
color: Color(0xFF959DA8),
),
),
],
),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
child: Text(
'MENU BUTTONS',
style: TextStyle(
fontFamily: "Roboto",
fontSize: 20.0,
color: Color(0xFFD4D7DA),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 1',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(
width: 10.0,
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 2',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 15.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 2.0, 2.0, 8.0),
child: Expanded(
child: Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 3',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 8.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(
width: 10.0,
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home,
color: Colors.white, size: 30.0),
label: Text(
'Text Button 4',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 8.0,
color: Colors.white),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 75.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
),
),
],
),
],
),
),
],
),
),
);
}
}
Try with this and also if you used a list or column you can make it expanded
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class QuickMenu extends StatelessWidget {
const QuickMenu({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: false, //to remove back button
backgroundColor: Colors.white,
flexibleSpace: Container(
margin: EdgeInsets.fromLTRB(4.0, 25.0, 4.0, 3.0),
height: 55.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image(
image: AssetImage('images/profile.png'),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_outlined,
size: 35.0,
color: Color(0xFF959DA8),
),
),
],
),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Card(
margin: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 15.0),
clipBehavior: Clip.antiAlias,
color: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 3.0),
child: Text(
'MENU BUTTONS',
style: TextStyle(
fontFamily: "Roboto",
fontSize: 20.0,
color: Color(0xFFD4D7DA),
),
),
),
],
),
Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.home),
label: Container(
width: 100,// change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Text",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(width: 10,),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.payments_rounded),
label: Container(
width: 100, // change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Text Button 2",
textAlign: TextAlign.left,
maxLines: 2,
style: TextStyle(fontSize: 24),// change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
SizedBox(height: 10,),
Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.shopping_cart),
label: Container(
width: 100,
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TextButton 3 ",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
SizedBox(width: 10,),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.person_outline),
label: Container(
width: 100, // change width as you need
height: 70, // change height as you need
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TextButton 4",
textAlign: TextAlign.left,
maxLines: 2, // change max line you need
),
),
),
style: TextButton.styleFrom(
padding:
EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: Color(0xFFD4D7DA),
),
),
],
),
],
),
),
),
],
),
),
);
}
}
output:
Just simply use column widget in the label
TextButton.icon(
onPressed: () {},
icon: const Icon(Icons.home, color: Colors.white, size: 30.0),
label: Column(
children: const [
Text(
'Text Button Title',
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
Text(
'Text Button Subtitle',
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
],
),
style: TextButton.styleFrom(
padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
backgroundColor: const Color(0xFFD4D7DA),
),
),
OR
You can simply use Row widget
InkWell(
onTap: () {},
child: Container(
padding: const EdgeInsets.fromLTRB(10.0, 8.0, 20.0, 8.0),
color: const Color(0xFFD4D7DA),
child: Row(
children: const [
Icon(Icons.home, color: Colors.white, size: 30.0),
SizedBox(width: 12),
Expanded(
child: Text(
'Text Button 1',
softWrap: true,
style: TextStyle(fontFamily: 'Roboto', fontSize: 15.0, color: Colors.white),
),
),
],
),
),
),
To create UI like this, you just need to follow these steps:
Take a Column widget.
Inside column, take a Align(alignment:Alignment.left, child: Text("Menu Buttons") )
After that take two Rows
Row(children: [
Container(
height: 60,
width: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Icon(Icons.add), Text("Text")])),
Container(
height: 60,
width: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Icon(Icons.add), Text("Text")])),
]),
Related
How to create an UI like above just the part where the Edit Profile button is on the edge of both the containers ? I used stack and positioned but didnt work out for me . Can somebody help me with this . How to approach this .
try this code no perfect but it will give you some idea
Container(
height: double.infinity,
width: double.infinity,
color: Colors.red,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
const SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
],
),
)
],
)),
),
Container(
width: 80,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
borderRadius: BorderRadius.circular(15.0), ),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Container(
child: const Text('Edit Profile'),
),
),
),
),
],
),
),
]),
);
Instead of using Stack you can use Transform.translate to shift the TextButton up by the half of its height:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
color: Color(0xFFF09384),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topCenter,
color: Color(0xFF3E8C92),
child: Column(
children: [
Transform.translate(
offset: Offset(0,-35/2), // Here you insert the half of the button height
child: TextButton(
onPressed: () => print("Hello"),
child: Text("Edit Profile"),
style: TextButton.styleFrom(
fixedSize: Size(120, 35), // Here you should fix the size of the button
backgroundColor: Colors.white,
primary: Color(0xFF3E8C92),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
...List<Text>.filled(5, Text("Data"))
]
),
),
),
],
)
),
);
}
}
I need that if the user had a long nickname, then an ellipsis would appear, but it does not work.
Here is the code:
AppBar(
elevation: 0,
toolbarHeight: 76,
backgroundColor: Colors.transparent,
title: Row(
children: [
widget.isActiveBackButton
? IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back_rounded,
color: Colors.black87.withOpacity(0.7),
size: 30,
))
: Container(),
widget.isActiveBackButton
? const SizedBox(
width: 20,
)
: Container(),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Row(
children: [
Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
),
const SizedBox(width: 5.0),
!UserData.isVerifiedAccount
? Icon(
Icons.star_rounded,
color: Colors.yellow.shade700,
size: 30,
)
: Container(),
],
),
),
],
),
actions: [
Row(
children: [
Container(
margin: const EdgeInsets.only(right: 15.0),
child: CircleAvatar(
radius: 25,
child: Material(
borderRadius: BorderRadius.circular(100.0),
clipBehavior: Clip.antiAlias,
color: Colors.redAccent,
child: SizedBox(
width: 100,
height: 50,
child: InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
const MyLikesScreen()));
},
child: const Icon(
Icons.favorite_rounded,
size: 25,
),
),
),
shadowColor: Colors.black,
elevation: 5,
),
),
),
],
)
],
),
Follow this structure
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Flexible(
child: Text(
'WWWWWWWWWWWW',
appBar: AppBar(
elevation: 0,
toolbarHeight: 76,
backgroundColor: Colors.transparent,
title: Row(
children: [
IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back_rounded,
color: Colors.black87.withOpacity(0.7),
size: 30,
)),
const SizedBox(
width: 20,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Flexible(
child: Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
),
),
const SizedBox(width: 5.0),
Icon(
Icons.star_rounded,
color: Colors.yellow.shade700,
size: 30,
),
],
),
),
),
],
),
actions: [
Row(
children: [
Container(
margin: const EdgeInsets.only(right: 15.0),
child: CircleAvatar(
radius: 25,
child: Material(
borderRadius: BorderRadius.circular(100.0),
clipBehavior: Clip.antiAlias,
color: Colors.redAccent,
child: SizedBox(
width: 100,
height: 50,
child: InkWell(
onTap: () {},
child: const Icon(
Icons.favorite_rounded,
size: 25,
),
),
),
shadowColor: Colors.black,
elevation: 5,
),
),
),
],
)
],
),
Wrap the Text Widget with Expanded widget.
Expanded(child: Text(
'WWWWWWWWWWWW',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: Colors.black87.withOpacity(0.7),
)),
)),
i made a code which opens bottomSheet. Inside the bottomSheet there are inputs that can be added and subtracted by pressing a button.
but the changes that occur are not in accordance with what I expected. changes are delayed not directly.
Widget buildBottomSheet(BuildContext context) => makeDismissible(
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.5,
maxChildSize: 0.6,
builder: (_, controller) => Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
padding: const EdgeInsets.only(top: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Center(child: Icon(Icons.horizontal_rule)),
ListTile(
title: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(20)),
child: Image.network(
widget.productList.image,
width: 125,
height: 125,
fit: BoxFit.cover,
),
),
SizedBox(
height: 125,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.productList.discount == 0)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Text(
CurrencyFormat.convertToIdr(
widget.productList.price -
(widget.productList.discount /
100) *
widget.productList.price,
0),
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18),
),
if (widget.productList.discount >= 1)
Row(
children: [
Text(
"${widget.productList.discount}% ",
style: const TextStyle(
color: Colors.red,
fontWeight: FontWeight.w600),
),
Text(
CurrencyFormat.convertToIdr(
widget.productList.price, 0),
style: const TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w600,
decoration:
TextDecoration.lineThrough),
)
],
),
Text("Stock : ${widget.productList.stock}")
],
),
),
),
],
),
],
),
),
// minLeadingWidth: 125,
trailing: SizedBox(
child: IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close)),
),
),
const SizedBox(
height: 10,
),
const Divider(
indent: 15,
endIndent: 15,
color: Colors.black,
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
children: const [
Text(
"Pilihan Varian :",
style: TextStyle(fontWeight: FontWeight.w800),
),
],
),
),
const Spacer(),
SizedBox(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _minCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.remove),
),
Text('${widget.productList.minbuy + counter} '),
// const SizedBox(
// width: 50,
// height: 35,
// child: TextField(
// textAlign: TextAlign.center,
// decoration: InputDecoration(
// border: OutlineInputBorder(
// borderSide:
// BorderSide(color: Colors.black)),
// ),
// ),
// ),
ElevatedButton(
onPressed: _incrementCounter,
clipBehavior: Clip.antiAlias,
style: ElevatedButton.styleFrom(
shadowColor: Colors.white,
primary: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 0),
),
child: const Icon(Icons.add),
),
],
),
ElevatedButton.icon(
icon: const Icon(
Icons.add,
color: Colors.amber,
size: 14,
),
label: const Text(
"Keranjang",
style: TextStyle(color: Colors.amber),
),
clipBehavior: Clip.antiAlias,
onPressed: () {},
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.amber),
shadowColor: Colors.white,
primary: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 15, vertical: 10),
),
),
],
),
),
),
],
),
),
),
);
for full code : https://github.com/nazhoir/travel-app/blob/main/lib/views/shop/product_detail.dart
The code below (I shortened the code for simplicity) displays the characteristics of the device. I placed all the characteristics in the body and displayed them in a certain way. Tell me how I can make two buttons (marked in red in the photo) under the body. Or put them in the body? tell me the best way to do it.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
),
body: Align(
alignment: Alignment.topCenter,
child: Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
],
),
),
)
),
));
You can use bottomNavigationBar on Scaffold
Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
),
Also, you can wrap Container with Column widget
body: Column(
children: [
Container(...)//your widget
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(child: OutlinedButton(...)),
SizedBox(width:x),
Expanded(child: OutlinedButton(...)),
Full snippet on second approach
return Scaffold(
body: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: SingleChildScrollView(
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
const Divider(
color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:',
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ',
style: const TextStyle(
fontWeight: FontWeight.w400, fontSize: 20))),
],
),
),
)),
// Spacer(), /// you you want at the bottom
Padding(
padding: const EdgeInsets.all(8.0), //the one you prefer
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
SizedBox(
//space between button
width: 16,
),
Expanded(
child: OutlinedButton(
onPressed: () {},
child: Text("NNNNNN"),
),
),
],
),
)
],
),
);
You can check more about widgets, Column and layout.
I have designed an interaface of login. Everything is working fine but these two buttons are not looking good.
Myscreen in landscape
I want to adjust them according to the screen size and orientation
want to achieve
Here is my code to define them
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
FontAwesomeIcons.facebookF,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
FontAwesomeIcons.google,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
],
),
Also the button below needs to be responsive as well. I am using expanded widget but its working as shown. Any other way to do that !
You may try FractionallySizedBox to set the width of the whole container with respect to the available screen width. Also FittedBox can help to restrict the widget to be drawn with in the bounds.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FractionallySizedBox(
widthFactor: .8,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
alignment: Alignment.center,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
),
],
),
);
}
}