I placed a post like this. When the text did not fit, it did not pass when it should have been on the bottom line.
Code:
body: Container(
padding: EdgeInsets.all(10),
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.black
),
padding: EdgeInsets.all(10),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Soru sor, kazan", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),),
Text("SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.", style: TextStyle(fontSize: 16, color: Colors.white),),
],
),
),
],
),
),
)
)
I want it to go to the bottom line when there is no space left. How can I do it?
Just remove the Row widget that you have above the Padding and the issue will gone.
Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Soru sor, kazan",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.",
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
Related
here is my currently code:
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
but i want it like this:
The 2nd Column you have used should be a Row
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//this line is important for providing equal space
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
Card(
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text',
style: TextStyle(fontSize: 18),
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"spots",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
),
),
const Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
const Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
),
return Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6))),
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
));
Output
hi i need to design this page
but i'm new in flutter so i'm face difficult to manage to do it
here is my try
Container (
child: Column (
children: <Widget> [
Container(
margin: EdgeInsets.all(20),
child: Text(
"Source Account",
style: TextStyle(fontSize: 30,
color: Color(0xff8aa1ba)),
),
),
Container(
height: 100,
child: Card(
color: Color(0xff343b4b),
clipBehavior: Clip.antiAlias,
elevation: 10,
margin: EdgeInsets.all(7),
child: Column(
children: <Widget>[
ListTile(
title: Text("Main Account 123456",
style: TextStyle(
color: Colors.white,
fontSize: 15, fontWeight: FontWeight.bold),textAlign: TextAlign.left,),
subtitle: Text(" Available Balance \n 10.000.9 KWD" ,
style: TextStyle(
color: Colors.white,
fontSize: 15, fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
),
],
),
),
),
],
),
)
so can any one help me to implement this or give me an idea of how to implement a textfield inside a list tile or card
Put a Row inside of your title. So replace the your code with something like this:
ListTile(
title: Row(
children: <Widget>[
Expanded(
child: TextField(
// your TextField's Content
),
),
],
),
Card(color: Colors.grey, child: Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8), child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Loans", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500,),),
Column(children: [
Icon(Icons.add),
Text("Amount", style: TextStyle(color: Colors.white,),)
])
]
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(2),
),
padding: EdgeInsets.symmetric(horizontal: 16),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
style: TextStyle(color: Colors.white),
textAlign: TextAlign.end,
),
)
]),
),)
I am trying to draw *star in label as the image below
I have tried
Text("5 *",style: TextStyle(color: Colors.white, backgroundColor: Colors.green),)
But I don't know how I can embed *(Star) with label ?
you can use the icon class for that
Row(
children: [
Text("5),
Icon(Icons.star),
]
)
Container(
width: 80,
height:50,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green[700],
),
child: Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
Text('5',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
)),
SizedBox(width: 10),
Icon(Icons.star, color: Colors.white)
])),
Just check this code :
The star icon can be obtained using this plugin:
https://pub.dev/packages/material_design_icons_flutter#-readme-tab-
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0),color: Colors.green),
width: 100,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('5',style: TextStyle(color: Colors.white),),
),
Icon(MdiIcons.star,color: Colors.white,),
],
),
),
I have a row inside this a column, column children are a two text, first text widget I put inside a container, I want the container background fill dull width of column. but the background only seen in where the text are present, left and right are empty,
here is my code
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
_bookingData.bookingData[index].paymentStatusFe =="Paid" ?
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.deepPurpleAccent)
),
child:
Column(
children: <Widget>[
Container(
child: Text("Paid"),
color: Colors.red,
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Text(
'AED' +
' ' +
_bookingData
.bookingData[
index]
.amount
.toString(),
style: TextStyle(
fontSize:
12,
fontFamily:
'Roboto Condensed',
color: Colors.deepPurpleAccent,
fontWeight:
FontWeight
.w600),
),
)
],
),
): Container(
// width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.red)
),
child:
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Not Paid",
style: TextStyle(
backgroundColor: Colors.red,
color: Colors.white
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Text(
'AED' +
' ' +
_bookingData
.bookingData[
index]
.amount
.toString(),
style: TextStyle(
fontSize:
12,
fontFamily:
'Roboto Condensed',
color: Colors.red,
fontWeight:
FontWeight
.w600),
),
)
],
),
),
],
),
Row is put inside a Listview. So I want to have red in background for paid text, but red is only coming start of paid and till where it ends, not the entire column.
You have to do two changes in your code
1) Add your root container in within expanded widget
2) In your inner container set width:double.infinity
Row(mainAxisSize: MainAxisSize.max, children: <Widget>[
// first change
Expanded(
flex: 1,
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.deepPurpleAccent)),
child: Column(
children: <Widget>[
Container(
//second change
width: double.infinity,
child: Text("Paid"),
color: Colors.red,
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Text(
'AED TEST',
style: TextStyle(
fontSize: 12,
fontFamily: 'Roboto Condensed',
color: Colors.deepPurpleAccent,
fontWeight: FontWeight.w600),
),
)
],
)),
),
]);
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