Container not going to bottom of screen in flutter? - flutter

I am working on flutter layouts and i am trying to get the last container to be placed exactly like bottom navigation bar, in my body used columns to set widgets and in second last widget is list view. i want list view to fill the bottom screen until last container which is acting as bottom bar.
But my last container has a lot of space at the bottom how to fix that.
class _MyPersondataState extends State<Persondata> {
double height;
double width;
final Color lightbluecolor = Color(0xFF3AB5FF);
List<int> getListItems(){
List<int> numberlist = List(10);
numberlist[0] = 5700;
numberlist[1] = 1200;
numberlist[2] = 970;
numberlist[3] = 1840;
numberlist[4] = 2520;
numberlist[5] = 5700;
numberlist[6] = 6200;
numberlist[7] = 4970;
numberlist[8] = 6840;
numberlist[9] = 7520;
var items = numberlist;
return items;
}
Widget getListView(){
var listitems = getListItems();
var listView = ListView.builder(
itemCount: listitems.length,
itemBuilder: (context, index){
return ListTile(
title: Text('Gross Salary'),
trailing: Text(listitems[index].toString()),
);
}
);
return listView;
}
#override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(''),
),
body: Container(
margin: EdgeInsets.only(left:15.0,right: 15.0),
color: Colors.white,
width: width,
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Text(
'What a loss carryforward is',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
SizedBox(height: 8),
Flexible(
child: new Text(
'If your costs exceeded your salary, then you will have loss for this tax year.'
' You can carry this loss.'
' This will reduce next year’s tax\n\n. '
'*How do i do that?*\n\n'
' In order to make use of this, you must send a tax return to office.'
' You do not have to worry.'
' You will then receive acknowledgement from the office.\n\n'
,
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
height: 1.2,
fontSize: 14.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your Taxes in detail',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your income',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 6,),
Expanded(
child: getListView(),),
Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
color:Colors.amber,
margin: EdgeInsets.only(left:2.0,right: 2.0,bottom: 1.0, top: 24.0),
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
"REFUND :",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
Text(
"0,00"+"$",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 20.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
],
),
Spacer(),
MaterialButton(
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(12.0) ),
height: 50,
onPressed: (){
// Navigator.push(context, MaterialPageRoute(builder: (context)=>Persondata()));
print("cilcked");
},
child: Text(
"Submit",
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
color: lightbluecolor ,
),
],
),
),
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
this is pic where is shpwing white space.

Give the last Container desired height and finally wrap your listView in Expanded.
Expanded(
child: ListView(
children: <Widget>[]
),
),
child: Containter(
height: x,
), //last one
),

Give the listview desired height by wrapping it inside a container and finally wrap your last container in Expanded. Here's an example!
Container(
height: x,
child: ListView(
children: <Widget>[]
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Containter(), //last one
),
),

Related

How to align three Widgets in row. (one in the right corner, one in the left and one in the center)

I want to create a row and put three widgets in there. One that will be in the most right corner of the row, one that will be in the most left corner and one that will be in the center, I have been trying solutions for a while and I still can't make it look like I wanted. Added picture of what I want below.
This is what I want to create:
and this is my code (the relevant part of it):
this code represent one row (in the real code i multiply it and changing the relevant thing.)
GestureDetector(
onTap: () {
print(title);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title, // Name
style: TextStyle(
fontSize: size.width * .0365,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Text(
subTitle, // Name
style: TextStyle(
fontSize: size.width * .0365,
color: const Color(0x9C9C9C9C),
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons.arrow_forward_ios, // the arrow icon in the left of the row
size: size.width * .04,
color: const Color(
0xA6A6A6A6,
),
),
],
),
);
I tried to wrap those Widgets with the Align Widget and use the alignment: Alignment.center, but still didn't succeed.
this is what I got:
as you can see the Widgets in the middle aren't align like I wanted. if Someone know what I have been missing please let me know.
UPDATE
now my code working like I wanted but now the text are centered but they aren't centered with the whole page. Someone know how can I fix that?
this is the whole code of the page:
// imports...
class EditProfile extends StatefulWidget {
const EditProfile({Key? key, this.user}) : super(key: key);
#override
final user;
State<EditProfile> createState() => _EditProfileState(user);
}
class _EditProfileState extends State<EditProfile> {
late UserData user;
late String username;
late String phoneNumber;
late String location;
late String gender;
_EditProfileState(this.user);
#override
void initState() {
super.initState();
Map<String, dynamic> data = user.getUserData();
username = data["username"];
phoneNumber = data["phoneNumber"];
//location = data["location"];
location = "location";
gender = data["gender"];
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text("Edit profile"),
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Text(
"Cancel",
textAlign: TextAlign.center,
),
),
],
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
print("save");
},
child: const Text(
"save",
textAlign: TextAlign.center,
style: TextStyle(
color: Color.fromRGBO(0, 139, 182, 1),
fontWeight: FontWeight.w500,
),
),
),
],
),
),
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: size.height * .03),
child: Center(
child: CircleAvatar(
backgroundImage: Image.network(
"some image path",
).image,
radius: size.width * .14,
),
),
),
Padding(
padding: EdgeInsets.only(top: size.height * .01),
child: GestureDetector(
onTap: () {
print("changing pofile pic");
},
child: Text(
"Change Profile Photo",
style: TextStyle(
fontSize: size.width * .035,
color: Color.fromRGBO(0, 139, 182, 1),
decoration: TextDecoration.none,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: size.width * .04),
child: Container(
height: size.height * .25,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
filedRow(size, "Name", username),
filedRow(size, "Phone", phoneNumber),
filedRow(size, "Location", location),
filedRow(size, "Genger", gender),
],
),
),
),
],
),
),
);
}
GestureDetector filedRow(Size size, String title, String subTitle) {
return GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: size.width * .036,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Expanded(
flex: 4,
child: Text(
subTitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: size.width * .036,
color: Color(0x9C9C9C9C),
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Icon(
Icons.arrow_forward_ios,
size: size.width * .03,
color: Color(0xA6A6A6A6),
),
],
),
);
}
}
and this is what I get
I double-checked everything and you were right, I didn't notice that my headers were the same length, but I fixed everything. See corrected code and screenshot:
Widget mainWidget() {
return Scaffold(
appBar: AppBar(
title: const Text("App bar"),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: const [
CustomRow(title: 'Name', choosedSetting: 'Alexey'),
CustomRow(title: 'Phone', choosedSetting: '+375 29 154-52-52'),
CustomRow(title: 'Gender', choosedSetting: 'Man'),
],
),
),
);
}
}
class CustomRow extends StatelessWidget {
final String title;
final String choosedSetting;
const CustomRow({Key? key, required this.title, required this.choosedSetting})
: super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title, // Name
style: const TextStyle(
fontSize: 16,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
Expanded(
flex: 4, // Change this property to align your content
child: Text(
choosedSetting, // Name
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 15,
color: Colors.black,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
),
const Icon(
Icons.arrow_forward_ios, // The arrow icon in the right of the row
size: 12,
color: Colors.black),
],
),
);
}
}
Image: https://i.stack.imgur.com/F39A1.png
To align the "choosedSetting" text, change the flex value.
I should also notice an error in your comment:
You have: // the arrow icon in the left of the row
How to write correctly: // the arrow icon in the right of the row
And here's what the Expanded widget does: Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
try to put textAlign: TextAlign.center, in the middle text like this :
Text(
subTitle, // Name
textAlign: TextAlign.center,
style: TextStyle(
fontSize: size.width * .0365,
color: const Color(0x9C9C9C9C),
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Everything works by default, I took your code and ran it without changes, I am attaching the code and a screenshot:
Column(
children: [
GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
"Name1", // Name
style: TextStyle(
fontSize: 16,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Text(
"ILikeBananas", // Name
style: TextStyle(
fontSize: 15,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons
.arrow_forward_ios, // the arrow icon in the left of the row
size: 12,
color: Colors.white),
],
),
),
GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
"Name2", // Name
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Text(
"Test Title", // Name
style: TextStyle(
fontSize: 15,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons
.arrow_forward_ios, // the arrow icon in the left of the row
size: 12,
color: Colors.white),
],
),
),
GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
"Name3", // Name
style: TextStyle(
fontSize: 16,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Text(
"A Lot Of Numbers Test", // Name
style: TextStyle(
fontSize: 15,
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons
.arrow_forward_ios, // the arrow icon in the left of the row
size: 12,
color: Colors.white),
],
),
),
],
),
Image: https://i.stack.imgur.com/DznZw.png
If I understood you correctly, then you want to shift the text to the left or right, align it in some way. To do this, simply change the value of the "flex" attribute on the Expanded widget.

Flutter PopupMenuButton padding or full width

I need to show ... if text-overflow and on click need to show the full text. So I use PopupMenuButton It's all working fine but the issue is it's showing just 3 alphabets and showing ... then I know width is short but before I use this text it's showing almost 10 words I think there is some padding or something I have enough width to show more text but it's not showing
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Container(
width: Width *
0.225,
child:
Align(
alignment:
Alignment.topLeft,
child: PopupMenuButton<
String>(
icon:
Container(
child: Text(datashowThis[index]['data'][i]['serviceName'] != null ? datashowThis[index]['data'][i]['serviceName'] : '',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(color: textGreyColor, fontSize: 12, fontFamily: 'SegoeUI-SemiBold')),
),
onSelected:
(choice) {},
itemBuilder:
(BuildContext context) {
return [
'${datashowThis[index]['data'][i]['serviceName']}'
].map((String
choice) {
return PopupMenuItem<String>(
value: choice,
child: Container(width: 100, child: Text(choice, style: TextStyle(color: kPrimaryColor, fontFamily: 'SegoeUI'))),
);
}).toList();
},
),
),
),
Container(
width: Width *
0.16,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['hourBooked_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width: Width *
0.16,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['hourScheduled_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width:
Width *
0.2,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['appointmentsBooked_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
Container(
width: Width *
0.15,
child:
Center(
child: Text(
datashowThis[index]['data'][i]['bookedPercentange_Productivity']
.toString(),
textAlign: TextAlign
.center,
style: TextStyle(
color: textGreyColor,
fontSize: 12,
fontFamily: 'SegoeUI-SemiBold')),
),
),
],
),
);
You can see issue on image
The issue is you are putting other widget where icon widget is expected. So it's default icon width is taken.
Solution:
Use child instead of 'icon' in PopUpMenuButton widget.
Here is example:
Container(
width: ProjectResource.screenWidth * 0.4,
color: AppColors.blueColor,
child: Align(
alignment: Alignment.topLeft,
child: PopupMenuButton<String>(
child: Container(
color: AppColors.greenColor,
child: Text('Data here sa as a a a as asas a',
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.whiteColor,
fontSize: 12,
)),
),
onSelected: (choice) {},
itemBuilder: (BuildContext context) {
return ['Data here'].map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Container(
width: ProjectResource.screenWidth * 0.225,
child: Text(choice,
style: TextStyle(color: AppColors.greenColor))),
);
}).toList();
},
),
),
)
So you can use any width and height of PopUpMenuButton child.
Thanks.

Extra Spacing Inside My Text Widget In Flutter Application

I have created a mobile application and I was using a font family called Baloo Paaji 2 from google and I have faced an issue of extra spacing created between my 2 text widgets. Below you can see the image of the view.
The text I am talking about is the Welcome! Lakshya Jain. The space between the 2 is way too much. There is no SizedBox or Padding added to the text widget. I tried using 2 different methods to see if the method was the problem. The 2 different methods are shown below.
Method 1
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
Method 2
Text.rich(
TextSpan(
text: "Welcome !\n",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
children: [
TextSpan(
text: userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
],
),
),
Now I used another method which fixed this issue but created another one.
The Method 3 Screenshot is as follows.
Now the spacing issue is fixed but it created as the text has moved down a little. I want it to be center without the huge gap.
The code for this method is as followed.
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
The full code for the whole header is as followed
class HomeHeader extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Get User UID
final user = Provider.of<MyAppUser>(context);
return Stack(
clipBehavior: Clip.none,
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 15.0),
width: MediaQuery.of(context).size.width,
height: 230.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(255, 18, 54, 1.0),
Color.fromRGBO(255, 164, 29, 1.0),
],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(59.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: DatabaseService(uid: user.uid).userData,
builder: (context, snapshot) {
UserDataCustomer userData = snapshot.data;
return Row(
children: [
ClipOval(
child: CachedNetworkImage(
height: 70,
width: 70,
imageUrl: userData.profilePicture,
),
),
SizedBox(
width: 10.0,
),
Stack(
alignment: Alignment.topLeft,
clipBehavior: Clip.none,
children: [
Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
Positioned(
top: 20.0,
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
// Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text(
// "Welcome !",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// ),
// Text(
// userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// Text.rich(
// TextSpan(
// text: "Welcome !\n",
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 18.0,
// fontWeight: FontWeight.w600,
// ),
// children: [
// TextSpan(
// text: userData.fullName,
// style: TextStyle(
// color: Colors.white,
// fontFamily: "BalooPaaji",
// fontSize: 24.0,
// fontWeight: FontWeight.w900,
// ),
// ),
// ],
// ),
// ),
],
);
},
),
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("Users Database")
.doc(user.uid)
.collection("Cart")
.snapshots(),
builder: (context, snapshot) {
int totalItems = 0;
if (snapshot.connectionState == ConnectionState.active) {
List documents = snapshot.data.docs;
totalItems = documents.length;
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen(),
),
);
},
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10.0,
),
),
child: Center(
child: Text(
"$totalItems" ?? "0",
style: TextStyle(
fontSize: 20.0,
fontFamily: "BalooPaaji",
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
);
},
),
],
),
),
Positioned(
top: 200.0,
child: SearchBar(
width: MediaQuery.of(context).size.width * 0.83,
hintText: "Location",
),
),
],
);
}
}
Someone please help me and fix this issue as soon as possible.
I guess you are trying to reduce gap / padding between the 2 lines. If that is so, then the easiest way is to wrap them inside container and give it a fixed height. Check below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20, // assign height as per your choice
child: Text(
"Welcome !",
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
),
Container(
height: 26, // assign height as per your choice
child: Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
),
),
),
],
),
NOTE: you can also give height inside the Text widget
Text(
userData.fullName,
style: TextStyle(
color: Colors.white,
fontFamily: "BalooPaaji",
fontSize: 24.0,
fontWeight: FontWeight.w900,
height: 1.2, // assign height to fontSize ratio as per your choice
),
),
Try to change :
This : fontWeight: FontWeight.w600,
To : fontWeight: FontWeight.w500,

how to place image on border of card in flutter?

I am new in flutter , I am sharing an image in which there is card and its border has an image (as you can see the date i.e JULY , 2020 is showing inside an image) . I don't have any idea of how to achieve this functionality . Please help me.
I wrote the below code to create the card. The code is displaying the date image inside the card . Do I need to follow some other widget rather than card and listtile?
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(0.0),
child:
Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child :
Card(
child: Ink(
color: Colors.grey[200],
child : ListTile(
onTap: () {
},
title: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child:
Center(child: Text('JULY , 2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.white
),),),
width: 190.0,
height: 30,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/apply_leave.png"),
fit: BoxFit.fill,
// alignment: Alignment.center,
),
),
),
Container(
child:Text('' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.black
),)
)
]
),
SizedBox(height: 20.0),
Expanded(
child :
Row(
children: <Widget>[
Text('FEE SCEDULE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('DUE DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('END DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('19-07-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
)
]
),
),
),
)
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
],
),
),
//
),
)
]
)
);
},
separatorBuilder: (BuildContext context,
int index) => const Divider(),
);
}
If I understand you correctly, you want to put an image above the container with border. You can use Stack for it.
Wrap that container in it and put it at the start of children list, that way it will be displayed below an image, and everything else. Use Positioned to rearrange widgets in stack. You may want to wrap stack in Container to position it better.
Feel free to play with values to get the most desired result:
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Card(
child: Ink(
color: Colors.green[200],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black),
),
),
],
),
SizedBox(height: 20.0),
Expanded(
child: Row(children: <Widget>[
Text('FEE SCEDULE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
])),
Expanded(
child: Row(
children: <Widget>[
Text('DUE DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
],
),
),
Expanded(
child: Row(
children: <Widget>[
Text('END DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text(
'19-07-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
)
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: _buildBorderImage(),
),
)
],
),
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total Amount:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
Text(
'254684' + '/-',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
//
),
),
],
),
);
}
Container _buildBorderImage() {
return Container(
child: Center(
child: Text(
'JULY , 2020',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white),
),
),
width: 190.0,
height: 30,
decoration: BoxDecoration(
color: Colors.green,
// image: DecorationImage(
// image: AssetImage("assets/images/apply_leave.png"),
// fit: BoxFit.fill,
// alignment: Alignment.center,
// ),
),
);
}

How to align text widget in rows in google flutter?

I'm trying to align several a text which is in rows (a number, a small padding, followed by said text) in a column and don't know how to achieve it.
I already tried out every MainAxisAlignment setting in the rows property.
This screenshot should clarify my issue: The left part is the mockup and how it's supposed to look like, right-hand side is the current state in flutter.
I want the text to be aligned at the green line that I added to visualize my problem (so the first text needs to start a bit more to the right).
My code:
Widget singleStep(BuildContext context, int numToPrint, String text,
{String fineprint = ""}) {
return Padding(
padding: EdgeInsets.only(
bottom: 0.023 * getScreenHeight(context),
left: 0.037 * getScreenWidth(context)),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "#",
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE,
color: GoZeroColors.green)),
TextSpan(
text: numToPrint.toString(),
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE))
])),
Padding(
padding: EdgeInsets.only(left: 0.017 * getScreenWidth(context)),
child: RichText(
text: TextSpan(
style: GoZeroTextStyles.regular(_TEXTSIZE),
children: <TextSpan>[
TextSpan(text: text + "\n"),
TextSpan(
text: fineprint,
style: GoZeroTextStyles.regular(_FINEPRINTSIZE))
])))
],
));
}
All steps are wrapped in a column, which is a child of a Stack.
Advice is gladly appreciated. Also if you got any other advice to improve the code, feel free to leave a comment :)
Thank you in advance!
Cheers,
David
I hope I understand you well. There are some advices for your problem to solve it:
Consider to add SizedBox(width:20.0) before RichText widgets to achieve the align in mockup.
Looks like you want to make all Text widgets centered. Consider to add center widget so they align themselves at the center of column or row.
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(children: [
Expanded(
flex: 4,
child: Container(
alignment:Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey, width: 1.0)),
child:Text('I\'m in Circle',textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)))),
SizedBox(height: 15),
Text('Title',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)),
SizedBox(height: 10),
Expanded(
flex: 3,
//Use listview instead of column if there are more items....
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#1',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#2',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#3',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
])
]))
]));
}
My suggestion would be to return Container instead of Padding from the Widget singleStep and use the property padding of the container to set the padding.
Screenshot
Below is a very basic code snippet using Container using which I could add padding to the left of texts:
void main() {
runApp(
MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.only(
left: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
],
),
),
),
),
),
);
}
Hope this is helpful.