flutter setState Delay in bottomSheet - flutter

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

Related

Flutter comment_tree 0.3.0 How to remove replies under comments

I use the component as in the description, I can’t figure out how to remove the answer (child component) in the component itself, or at least how to check if it exists, then show it, if not, then don’t show it.
https://gist.github.com/lomanu4/3abba49f6fbcecbde4c07df82c3ce11c
class _ComentCardState extends State<ComentCard> {
bool childcomment = false;
#override
Widget build(BuildContext context) {
return Column(children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
child: CommentTreeWidget<Comment, Comment?>(
Comment(
avatar: 'null',
userName: widget.snap['name'],
content: '${widget.snap['text']} '),
[
Comment(avatar: 'null', userName: 'null', content: 'null'),
],
treeThemeData: childcomment
? TreeThemeData(lineColor: Colors.green[500]!, lineWidth: 3)
: TreeThemeData(lineColor: Colors.green[500]!, lineWidth: 3),
avatarRoot: (context, data) => PreferredSize(
preferredSize: const Size.fromRadius(18),
child: Row(
children: [
CircleAvatar(
radius: 18,
backgroundColor: Colors.grey,
backgroundImage:
NetworkImage(widget.snap['profilePic'].toString()),
),
],
),
),
avatarChild: (context, data) => const PreferredSize(
preferredSize: Size.fromRadius(12),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.grey,
backgroundImage: AssetImage('lib/assets/homescreen.png'),
),
),
contentChild: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'dangngocduc',
style: Theme.of(context).textTheme.caption?.copyWith(
fontWeight: FontWeight.w600, color: Colors.black),
),
const SizedBox(
height: 4,
),
Text(
'${data!.content}',
style: Theme.of(context).textTheme.caption?.copyWith(
fontWeight: FontWeight.w300, color: Colors.black),
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption!.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: const [
SizedBox(
width: 8,
),
Text('Reply'),
],
),
),
)
],
);
},
contentRoot: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.snap['name'],
style: Theme.of(context).textTheme.caption!.copyWith(
fontWeight: FontWeight.w600, color: Colors.black),
),
const SizedBox(
height: 4,
),
Text(
'${data.content}',
style: Theme.of(context).textTheme.caption!.copyWith(
fontWeight: FontWeight.w300, color: Colors.black),
),
const SizedBox(
height: 4,
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption!.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: [
SizedBox(
width: 8,
),
Text('Like'),
SizedBox(
width: 24,
),
Expanded(child: Text('Reply')),
Container(
padding: const EdgeInsets.all(8),
child: const Icon(
Icons.favorite_border,
size: 16,
),
)
],
),
),
),
],
);
},
),
),
]);
}

Does anyone know how to fix this? TextOverflow.ellipsis does not help to put ellipsis

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),
)),
)),

Navigate back from page flutter

I want to navigate to the previous page using the arrow icon I have added in this code. to where I want to add that code and tell me how to code that part. want to navigate from detail_screen.dart to home_page.dart using the arrow icon I have added. can someone please provide a proper answer for this?
detail_screen.dart
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
//shadowColor: Colors.transparent,
leading: Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: const [
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child:
Icon(Icons.favorite_border_outlined, color: Colors.black),
),
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child: Icon(Icons.shopping_bag_outlined, color: Colors.black),
)
],
),
),
],
),
body: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: Container(
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
padding: const EdgeInsets.only(left: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
fit: BoxFit.contain,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.grey.shade100,
),
alignment: const Alignment(1, 1),
height: 310,
width: 375,
child: Column(
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
"Crop Top",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blueAccent,
child: null),
),
),
SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.amber,
child: null),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.lightGreen,
child: null),
),
),
]),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 10),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 16,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
// SizedBox(
// height: 30,
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XS');
},
child: Text('XS'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('X');
},
child: Text('S'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('M');
},
child: Text('M'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('L');
},
child: Text('L'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XL');
},
child: Text('XL'),
),
],
),
SizedBox(
height: 30,
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"30% off",
style: TextStyle(
fontSize: 25,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
],
),
SizedBox(
height: 30,
),
Row(
children: const [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Rs.2950",
style: TextStyle(
fontSize: 18,
color: Color(0xff8399A9),
fontWeight: FontWeight.w700,
decoration: TextDecoration.lineThrough),
),
),
Text(
"Rs.2750",
style: TextStyle(
fontSize: 24,
color: Color(0xff0DA75F),
fontWeight: FontWeight.w700,
),
),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20),
),
),
padding: const EdgeInsets.all(28),
),
),
),
],
),
],
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/details_screen.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//final double _borderRadious = 24;
#override
#override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
),
body: ListView(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
children: [
HelloText(),
Name(),
SizedBox(
height: 10,
),
buildSearchInput(),
SizedBox(
height: 10,
),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressone.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Winter Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dresstwo.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.shade50,
),
height: 137,
width: 327,
child: Row(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(150, 40, 0, 40),
child: Text(
"Get",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(
"30%",
style: TextStyle(
fontSize: 24,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
Text(
"Off",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
],
)),
),
const Padding(
padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressthree.png"),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Know More",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20))),
padding: const EdgeInsets.all(15)),
),
),
]),
],
),
);
}
Widget HelloText() => Container(
child: Row(children: [
Text(
'Hello,',
style: TextStyle(
fontSize: 28,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget Name() => Container(
child: Row(children: [
Text(
'Nirasha',
style: TextStyle(
fontSize: 28,
color: Colors.amber,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[300], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}
use following Structure in detail_screen.dart scaffold:
body : SafeArea(
child: Column(
children: <Widget>[
Container(child: IconButton(
icon: Icon(
Icons.chevron_left_sharp, //backIcon
color: Colors.indigo,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
-------------------- //other Elements Of body
]
),
)
Please use this : Navigator.of(context).pop();
In your detail_screen.dart, use this code in Appbar leading.
IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),
Used this code now it is working.
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()));
},
),
In your DetailScreen, your leading widget should be IconButton and handle onpressed event of that IconButton to pop the activity from stack.
Here it is:
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),

How to write text below the container in row

I have always struggled with making this ui dynamically. Its a row of 4 or can be more than 4 containers with images in it and below that row there is text showing the name of the category made. I currently doing the name part with padding's according to my own device but it slips away in larger or smaller screen size devices other than mine. How can I tackle this. Image is also attached for better understanding if required. Also in the next code named intopage I am trying to stick the please read lines and the terms and conditions, privacy policy to the bottom but it isn't sticking
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/salonicon.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/hairdresser.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/facial-massage.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/body-massage.png",
scale: 1.2, color: Colors.white),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Salons".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 50.0),
child: Text(
"Hair".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 60.0),
child: Text(
"Skin".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 65.0),
child: Text(
"Body".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
],
),
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}
Use row then columns to specify them according to your needs it took me 3 minutes to change your code according to your needs super easy just practice a couple of times and you won' forget it.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage('assets/rnpic.png'),
fit: BoxFit.fill,
),
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(),
child: Align(
alignment: Alignment.topRight,
child: Container(
width: 70,
height: 30,
decoration: BoxDecoration(
color: const Color(0xFFFF6D00),
border: Border.all(
color: const Color(0xFFFF6D00)),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(20.0),
)),
child: const Center(
child: Text(
"-50% OFF",
style: TextStyle(color: Colors.white),
),
),
),
),
)
],
),
),
],
),
const SizedBox(
width: 150,
child: Center(
child: Text(
"Colorado Salon special hairstyle",
style:
TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
Container(
width: 80,
height: 30,
decoration: const BoxDecoration(
color: Color(0xFFFF6D00),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
"View".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.w600, color: Colors.white),
),
),
),
],
)
],
),
Make the layout like this
Row(
mainAxisAlignment : MainAxisAlignment.spaceBetween,
children:[
//item 1
Column(
children:[
Icon(),
Text(),
]
),
//item 2
Column(
children:[
Icon(),
Text(),
]
),
//item 3
Column(
children:[
Icon(),
Text(),
]
)
]
)

How to create Column in Center of App with Left/Right margins?

im new to Flutter. I have started learning a few days ago and am trying to grasp the concept of Rows and Columns.
I made a simple Page like this.
To explain my code I first make a Column to put everything in.
Then i use a Row for the TopBar, and then another Row to put the things into the body, so that i can put a Column in the center of the Page, with a bit of space on both sides of it. I then pack Text and Button in a Column and insert it into the Column in the Middle of the Page.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MainPage(),
));
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
child: Image.asset('assets/MenuIcon.png'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
child: Image.asset('assets/SearchIcon.png'),
),
),
],
),
Divider(height: 50,),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color1,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color2,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color3,
),
)
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color4,
),
),
),
],
),
],
),
),
Expanded(
flex:1,
child: Container(),
),
],
),
),
],
),
),
);
}
}
I feel like there is a lot of unnecessary Coding, but i can't seem to be able to improve it, with it working properly.
Can anybody Help improve my code?
Simply what i want to achieve is a Column in the middle of the body with margin to the left and right of the screen, without a million lines of code.
Scaffold by default has an parameter for AppBar() use that for your app bar
and as per your layout I will suggest to use ListView() instead of Column()
using Listview will automatically scroll your page if length of your page extends
and also has an parameter as padding using which you can add space on your left and right side
refer below mentioned code structure
Scaffold(
appbar: AppBar(),
body: ListView(
padding: EdgeInsets.only(left:12.0,right:12.0),
children: <Widget>[
//your list of widgets here
],
)
)
Try this:
Code example
Center(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
color: Colors.transparent,
child: Image.asset(
"assets/images/logo.png",
height: 100,
width: 200,
),
),
//email
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
labelText: 'Username',
filled: true,
fillColor: Colors.white,
),
),
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
cursorColor: Theme.of(context).primaryColor,
obscureText: passwordVisible,
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
filled: true,
fillColor: Colors.white,
onPressed: () {},
),
),
),
Container(
child: RaisedButton(
onPressed: () {},
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: "Light",
),
),
),
),
],
)),
)
I removed unnecessary code ! It may help you !
Color color1 = const Color.fromRGBO(204, 126, 185, 100);
Color color2 = const Color.fromRGBO(140, 235, 203, 100);
Color color3 = const Color.fromRGBO(227, 225, 204, 100);
Color color4 = const Color.fromRGBO(89, 130, 145, 100);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
// child: Image.asset('assets/MenuIcon.png'),
child:Icon(Icons.menu,color:Colors.black)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
// child: Image.asset('assets/SearchIcon.png')
child:Icon(Icons.search,color:Colors.black)
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:50,right:50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize:MainAxisSize.min,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color1,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color2,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color3,
child: Text('Button')),
)),
SizedBox(height: 10.0),
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color4,
child: Text('Button')),
),
),
],
),
),
),
],
),
),
);
}
}