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 want to make an this function on the product but i don't know how to since I'm too fresh with flutter...
so here is the picture of how I want it to be
The Sample
and here is my codes.
child: GridTile(
footer: Container(
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 8,
child: Text(product_name),
),
Text("\$$product_price",
style: const TextStyle(fontWeight: FontWeight.w600)),
TextButton(
onPressed: (){
debugPrint('added to cart');
},
child: Text("ADD TO CARD"),
style: TextButton.styleFrom(
primary: Colors.lightBlue[800],
shadowColor: Colors.deepPurple,
// elevation: 5,
),
),
],
),
),
child: Image.asset(
product_picture,
fit: BoxFit.cover,
),
),
),
),
),
and it is how it looks
How it looks
I will appreciate any help!
Here is something similar to the sample
GridView.count(
shrinkWrap: true,
childAspectRatio: .8,
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: List.generate(10, (index) {
return Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('https://i.ytimg.com/vi/6OovMIjDtAM/maxresdefault.jpg',)
),
const SizedBox(height: 14),
const Text('My Drink 101',
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
Text('\$500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
],
),
),
const SizedBox(height: 16),
Container(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
// add to cart
},
child: Icon(Icons.shopping_cart_outlined, color: Colors.blue,),
),
),
],
),
Align(
alignment: Alignment.topLeft,
child: InkWell(
onTap: () {
// add to favourite
},
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.favorite_border,
color: Colors.white,
),
),
),
),
],
),
);
}),
)
Well, there is a bunch needed to make a card similar to the sample you provided. Take a look at this video to get some ideas. I would recommend you to read the flutter widgets documentation for a better understanding of how each property work.
This channel also has a lot of great flutter UI content that is worthy to have a look at.
To start I would consider using a Card instead of a Container
I'm new to flutter and new to programming in general. My problem is I can't add this
child: Align(
alignment: Alignment(0, 48),
child: Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight._(4),
fontSize: 18.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
to this code
class _SetupState extends State<Setup> {
#override
Widget build(BuildContext context) {
return Column(children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
),
)),
]);
}
}
I tried adding it to the container, making a new align but I still didn't manage to succeed.
Thanks for the help!!
I made a layout based on the image provided in the comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Column(
children: <Widget>[
Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'WORKS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'RESTS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: FlatButton(
color: Colors.greenAccent,
child: Text(
'START',
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
onPressed: () {
},
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
),
],
)
],
),
),
),
),
);
}
I used a Column(let's name it column1) for the whole grey box, and every one of (SETS, +, -), (WORK, +, -), and (RESTS, +, -) is a Column inside the column1. Every (+, -) is a Row wrapped with a Padding. The Padding is used to make the (+, -) become closer to the center of the box.
There are many ways to make such layout, this is only one.
Result:
if that does not work you can first align it the way you want. Then use padding or margin so that you can have it exactly where you want it be.
Container(
padding:
alignment:
child:Text()
)
I am beginner for flutter.
I have one lock icon image, that need to display half within cell and half out of cell.
I want to create UI for ListItem.
I already write code as below, but it not work:
ListTile makeListTile() => ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 10.0),
title: Text(
"Item Title",
style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Expanded(
flex: 0,
child: Icon(Icons.settings, size: 20.0),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("120",
style: TextStyle(color: Colors.black54))),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("150",
style: TextStyle(color: Colors.black54))),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text("1",
style: TextStyle(color: Colors.black54))),),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
)
],
),
trailing:
new Stack(
children:[
Icon(Icons.lock, size: 20.0)
]),
onTap: () {
},
);
Please help me.
Thanks.
I suggest you try first yourself, because it will help to learn a different way to build the UI. If it's urgent then here is the code. But again I suggest trying yourself first. Everything in the dummy you need to change according to your requirement.
Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(width: 2.0, color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Item Name',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.close,
color: Colors.yellow,
size: 30.0,
),
)
],
),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.adjust,
color: Colors.yellow,
size: 20.0,
),
Text(
'Dummy Text',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
)
],
),
Row(
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(2.0)),
Text(
'1',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),Padding(padding: const EdgeInsets.all(2.0)),
Icon(
Icons.remove_circle,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(5.0))
],
)
],
),
)
],
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.group,
size: 30.0,
color: Colors.yellow,
),
)
],
)
This is how its look like for now:
1 use stack widget
2 add card with hight wight
3 add right side icon
4 add column
5 add row inside column
I have a flutter app, and i am trying to make it scrollable, because i am getting a
"Bottom overflowed by 34 Pixels", which i am sure is caused when my widget scrolls below the apportioned height of the screen, how can i solved this issue:
i followed this question to solve the issue, but noting happened :
this is my code:
return ListView(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.3), BlendMode.dstATop),
image: AssetImage('images/space.gif'),
fit: BoxFit.cover,
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 200.0, left: 40.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Start",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Your",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Adventure",
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 100.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.blue,
onPressed: () => gotoSignup(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"SIGN UP",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 30.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.redAccent,
onPressed: () => gotoLogin(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
)
],
);
Solved this by removing the height: MediaQuery.of(context).size.height, attribute in the first container widget