I want to create a padding between the text and the blue part. Now it looks like this:
But I want a space like this:
This is the code:
body: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 25, bottom: 24),
// height: 100,
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromARGB(255, 92, 172, 178),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
)
),
child: const Text(
"Olá, usuário",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 35,
),
)),
Center(child: Text(
"As suas finanças estão:",
style: TextStyle(
color: Colors.black,
fontSize: 18,
)),
)]),
You can include a SizedBox(height: 200), before Center widget. Or Padding widget with only top.
Another thing is you can use crossAxisAlignment: CrossAxisAlignment.center,
body: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 25, bottom: 24),
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromARGB(255, 92, 172, 178),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
)),
child: const Text(
"Olá, usuário",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 35,
),
)),
SizedBox(height: 100),
Text("As suas finanças estão:",
style: TextStyle(
color: Colors.black,
fontSize: 18,
)),
]),
Also you can use LayoutBuilder to get widget size & You may like to add top text as custom AppBar.
You can use toolbarHeight to get more size, or bottom
appBar: AppBar(
// toolbarHeight: ,
bottom: PreferredSize(
child: Container(
child: Row(
children: [],
),
),
preferredSize: Size.fromHeight(100),
),
),
For customAppBar with PreferredSizeWidget and also you can check SliverHeaderDelegate
Related
How do i make the login text and sign in text to start from a single margin rather than the alignment it is shown in the picture?
Here the text isnt being aligned from a single margin and has off placement between texts
Code for it:
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
width: double.infinity,
height: 200,
),
const Divider(
thickness: 3,
color: Colors.white,
indent: 160,
endIndent: 160,
),
Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(32, 32, 32, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
),
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
children: [
Text(
'Login',
textAlign: TextAlign.start,
style: GoogleFonts.inter(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
Text(
'Sign in to continue',
style: GoogleFonts.inter(
color: Color.fromRGBO(161, 161, 161, 1),
fontSize: 24,
fontWeight: FontWeight.w300),
)
],
),
)
],
),
),
),
],
),
Set the crossAxisAlignment property of the Column to start:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...]
)
Add CrossAxisAlignment.start to immediate parent column of text.
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, //here
children: [
Text(
'Login',
),
Text(
'Sign in to continue',
)
],
),
)
Edit: should be crossAxisAlignment.
Set the mainAxisAlignment attribute for the Column:
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...
Can anyone please help me to create this UI. I am trying all day to create this but I am unable to code.
Here is the design -
Please adjust color and others as you like
code here
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.green,
elevation: 16,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Wrap(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
margin: EdgeInsets.only(left: 10),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Dr. Alok Verma",
style: TextStyle(fontSize: 24),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text("Date: 14-06-2021",
style: TextStyle(fontSize: 24))),
Expanded(
child: FlatButton(
onPressed: () {},
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(5)),
padding: EdgeInsets.all(8),
child: Text("Completed",
style: TextStyle(fontSize: 24)))))
],
),
Text("Time: 10:20", style: TextStyle(fontSize: 24)),
SizedBox(
height: 20,
),
Text("Aastha Hospital",
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
Text("Some address", style: TextStyle(fontSize: 18)),
],
),
)
],
),
),
)
I'm building my first flutter app and I'm faced with a problem I'm trying to create a container that will allow you to choose several cities. I cannot align the text and the icon
child: Container(
padding: EdgeInsets.only(top: 16),
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
SizedBox(
width: 10,
),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
),
You need to use MainAxisAlignment and Expanded Property inside Row
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text('SÉLECTIONNEZ UNE VILLE',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold)),
),
Icon(Icons.keyboard_arrow_down,size: 30),
],
),
),
),
);
}
Output :
Your top padding was messing the alignment.Try the following:
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 10),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
);
}
}
You can use the crossAxisAlignment and mainAxisAlignment property of the Row widgets to determine how the children of the Row widget will be placed.
To center the Text and Icon vertically in the Row widget, set crossAxisAlignment: CrossAxisAlignment.center.
To center the Text and Icon horizontally in the Row widget, set mainAxisAlignment: MainAxisAlignment.center.
I added a demo code using your widget tree as an example, I also removed the top padding you gave the Container as it was putting the items downwards.
Container(
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
// set the crossaxisalignment so the [items] in the will be vertically centered
crossAxisAlignment: CrossAxisAlignment.center,
// set the crossaxisalignment so the [items] will be horizontally centered
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 10,
),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
),
OUTPUT:
I want to create a listview item design something like
Click here
and which I have tried so far is Click here
Here is my code
ListTile(
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 44,
minHeight: 44,
maxWidth: 64,
maxHeight: 64,
),
child: Image.network(catData[index]['icon'].toString(),
width: 150,
height: 150,
fit: BoxFit.cover,
headers: headersMap,
)
),
title: Padding(
padding: EdgeInsets.only(left: 10,bottom: 5, right: 10, top: 10),
child: Text(
getCategoryName(catData, index),
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
fontFamily: 'Mada-Medium',
letterSpacing: 0.25,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
subtitle: Padding(
padding: EdgeInsets.only(left: 10,bottom: 5, right: 10),
child: Text(
getText(catData[index]['catId'], subCatData),
style: TextStyle(
color: parseColor('##A2A2A2'),
letterSpacing: 0.25,
fontSize: 14,
fontFamily: 'Mada',
fontWeight: FontWeight.w500),
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
),
)
The image portion is not setting properly on listTile title. Please help to create this design
Try this
class ListItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0), bottomLeft: Radius.circular(20.0)),
child: Image.asset(
'assets/images/nilesh.jpg',
fit: BoxFit.cover,
height: 120,
width: 100,
),
),
SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(height: 20),
Text(
'Dummy Text',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
SizedBox(height: 30),
Text(
'Dummy Text',
style: TextStyle(color: Colors.grey, fontWeight: FontWeight.normal),
),
],
))
],
),
);
}
}
OUTPUT
In my flutter app I have a GridView in which I list cards. In the cards I want to have an image and some text. I am trying to do this as follows:
import 'package:flutter/material.dart';
class Home extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.green,
Colors.teal,
]
)
),
),
Padding(
padding: const EdgeInsets.only(top: 65),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white60, width: 2.0)
),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.restaurant, size: 120,),
),
),
]
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white
),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
style: TextStyle(
fontSize: 16,
color: Colors.white70
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 350),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)
),
),
Container(
margin: EdgeInsets.only(top: 250),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30)
)
),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: <Widget>[
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
],
)
),
),
],
),
),
),
);
}
}
And this renders the list of cards fine. My problem is that the cards bottom is being overflowed. I wrap the card in a container to fix this which looks like the follows:
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Some text here",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
I don't understand why this is happening. Any help would be appreciated. Thanks.
ok... I usual don't do that but I had to rework the whole structure because most of the things didn't make any sense. Now I don't really understand.. Why do you want cards to increase size to not overflow.. Did you mean decrease size? The cards in your grid view will be always the same because you use grid view. You have set crossAxisCount to 2 so 2 items in x axis and square.. If you add more, then on smaller screen they will be accessible by scrolling and will not overflow. I have set position of the container where you have all your cards from the top to 1/3 of the screen height which perhaps is better then hardcoding it to fixed size as you had. Try it and let me know if you need to adjust it in any other way.
UPDATE
Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: FractionallySizedBox(
heightFactor: 0.5,
child: Container(
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.white60, width: 2.0)),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.restaurant,
),
),
),
),
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
),
Flexible(
flex: 3,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
)),
),
),
),
]),
);