Related
I want to create view like image, the first view (blue view) is 30% of screen height
and the second view (red view) is center vertical of first view (15% of the first view from bottom to top, and 15% of the first view from bottom to bottom).
if in android XML constraint layout I can use guidelines to handle that, but in flutter what I can use to create like that view?
import 'package:flutter/material.dart';
import 'package:flutter_app2/custom_text.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Card statsWidget() {
return new Card(
elevation: 1.5,
margin: EdgeInsets.only(bottom: 210.0, left: 20.0, right: 20.0),
color: Colors.white,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.down,
children: <Widget>[
new Padding(
padding: EdgeInsets.all(20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Photos",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey,
fontSize: 16.0,
),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"22k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Followers",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey,
fontSize: 16.0,
),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"232k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Following",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey, fontSize: 16.0),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"332k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
)
],
),
)
],
));
}
#override
build(BuildContext context) {
return new Material(
type: MaterialType.transparency,
child: new Stack(
children: [
new Column(
children: <Widget>[
headerWidget(),
bodyWidget(),
],
),
new Center(
child: statsWidget(),
),
],
));
}
Widget headerWidget() {
var header= new Expanded(
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xff167F67),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(
child: new Container(
margin: EdgeInsets.only(bottom: 10.0),
height: 80.0,
width: 80.0,
decoration: new BoxDecoration(
color: const Color(0xff167F67),
image: new DecorationImage(
image: new NetworkImage(
"https://4.bp.blogspot.com/-QXHUYmKycZU/W-Vv9G01aAI/AAAAAAAAATg/eF1ArYpCo7Ukm1Qf-JJhwBw3rOMcj-h6wCEwYBhgL/s1600/logo.png"),
fit: BoxFit.cover,
),
border:
Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.all(
const Radius.circular(40.0)),
),
),
),
new Text(
"Developer Libs",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xffffffff),
),
)
],
),
),
flex: 1,
);
return header;
}
Widget bodyWidget() {
var bodyWidget=new Expanded(
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xffffffff),
),
child: new Padding(
padding:
EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
child: new Column(
children: <Widget>[
new CustomText(
label: "contact#developerlibs",
textColor: 0xff858585,
iconColor: 0xff167F67,
fontSize: 15.0,
icon: Icons.email)
.text(),
],
),
)),
flex: 2,
);
return bodyWidget;
}
}
I found this code and it's good but If I try in other phone resolution the second view is not center of first view. like below image
you can play with something like this :
LayoutBuilder(
builder: (context, constraints) {
final firstHeight = constraints.biggest.height * .3;
final secondHeight = 200.0;
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: firstHeight + secondHeight / 2,
child: Stack(
children: [
Positioned(
top: 0,
height: firstHeight,
left: 0,
right: 0,
child: Container(
color: Colors.blue,
),
),
Positioned(
top: firstHeight - secondHeight / 2,
left: 0,
height: secondHeight,
child: Container(
width: 200,
color: Colors.red,
),
),
],
),
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
],
),
);
},
)
result :
I think what you can use is wrap your image in an expanded widget and use its flex property. Flex basically ensures how much space a widget takes.So by default flex is set to 1. Hence wrap both your widgets with an expanded widget and set the flex property accordingly. I hope it solves your problem.
I am building a crypto portfolio app in Flutter.
My main page has a Scaffold that has one column which contains 4 rows. The first three rows are similar in design, each starts with the logo of the crypto, the name and then the amount I hold. The problem is the amount I hold, Since it can be a very big or very small number the value has a wide range and I cannot seem to find a way to align or right justify the values. I want all the numbers to be aligned to the right side of the screen.
This is my code:
return
Scaffold
(
appBar: AppBar(
title: Text('Portfolio'),
),
backgroundColor: Colors.white,
body: Column( children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/usdt_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('USDT',
style: TextStyle(fontSize: 15),
),
),
Container(
alignment: Alignment.topRight,
margin: EdgeInsets.all(30.0),
child: new Text("${data['usdt']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/bitcoin_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Bitcoin',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['btc']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),
Row(// ROW 4
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lightGreen, // background
onPrimary: Colors.white, // foreground
),
onPressed: ()
{
Navigator.pushNamed
(
context,
BuyPage.id,
);
},
child: Text('Buy'),
),ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
Navigator.pushNamed
(
context,
SellPage.id,
);
},
child: Text('Sell'),
),
]
),
],
)
);
This is what it currently looks like:
You can try this also
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.red,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'USDT',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"100.0",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.green,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'Bitcoin',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"0.000000005",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
],
),
);
}
}
Add a Spacer between the last two Container of your Rows:
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Spacer(),//Spacer here
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),
My UI currently looks like this:
I want to center the text in the middle of the space that is left over after the image is placed. However, I also want to make sure that my text does not overflow due to the size. How can I do that? My code is as follows:
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(imageUrl),
),
),
Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
modalityText,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
],
),
],
),
);
}
Here, this is one way of doing what you want
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage("imageUrl"),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
"name",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
"modalityText",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
),
],
),
],
),
);
}
Hello everyone i want to use a bottom navigator in product details file but I have two containers inside my row widget. I want to set my first container(which is Old Price and New Price Column) at the left, and also want to set my second container(which is Add to cart btn) at the right. how can I achieve this?
Here is code:
bottomNavigationBar: Material(
elevation: 7.0,
color: Colors.white,
child: Container(
height: 60.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width - 280.0,
decoration: BoxDecoration(
color: Color(0xfff40725),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'Add to cart',
style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Container(
child: Column(
children: <Widget>[
Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
],
),
),
),
],
),
),
),
Try this :
bottomNavigationBar: Material(
elevation: 7.0,
color: Colors.white,
child: Container(
height: 60.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width - 280.0,
decoration: BoxDecoration(
color: Color(0xfff40725),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'Add to cart',
style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Container(
child: Column(
children: <Widget>[
Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
],
),
),
),
],
),
),
),
Set proper mainAxisAlignment in the Row. You can refer this
I would have set it to mainAxisAlignment: MainAxisAlignment.spaceAround
I want to make my text centered inside of a Stack widget. This is what I have attempted so far. Right now, it's to the left on top of the image and that's not where I want it to be. I've tried using the Align widget and the Center widget but to no avail. What am I doing wrong?
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
child: Stack(
children: <Widget>[
Wrap(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
],
),
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
child: Center(
child: Wrap(
children: <Widget>[
Center(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width/2,
child: Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
],
),
),
),
Any option to make this text in center
Expanded(child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
SafeArea(child: Text("asdad"))
],
),
),
),
))
Problem identifed if text size is small (means "abc") it is working but if text size is large(measn "abc abc abc acb acb abc") it is not workgingHow to solve this issue?
You can try it:
Container(
width: 500,
height: 100,
child: Stack(
children: <Widget>[
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
width: 500,
),
Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold),
),
)
],
),
)
Solved
Expanded(
child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
Positioned.fill(
child:Center(child:Align(
child: Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
alignment: Alignment.center,
)
),
)
],
),
),
),
),
),
I want at it by a different approach, what if you used a Container widget and decorate it using a background image? Then, you can avoid using a Stack widget altogether.
Here's the minimal code:
return Padding(
padding: const EdgeInsets.all(8),
child: Container(
height: 500,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
),
),
),
child: Center(
child: Text(
"hi",
style: TextStyle(color: Colors.white, fontSize: 56),
),
),
),
);
Use textAlign: TextAlign.center inside your Text Widget
using alignment: Alignment.center inside your Container Widget could also help
No need to use so many widgets just put Text widget inside Container Widget
and use alignment property of both widgets
that should resolve the issue.
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
textAlign: TextAlign.center
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
)