I want to set layout Wedding Oraganizer , Prewedding text and Our services button to MainAxisAlignment.center and 345 Moo layout in bottom........................................................................................................................................
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.pink[200],
body: Padding(
padding: EdgeInsets.fromLTRB(30, 40, 30, 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Wedding Organizer',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontWeight: FontWeight.bold,
fontSize: 35,
color: Colors.white),
),
Text(
'Pre-wedding, Photo, Party',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 25.5,
color: Colors.white),
),
SizedBox(height: 20.0),
RaisedButton(
child: Text('Our services',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.white)),
color: Colors.red,
onPressed: () {},
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text('345 Moo 1 Tasud Chiang Rai, Thailand',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.grey[300])),
),
)
],
))),
);
}
}
My result
I want to output:
You can use a Spacer widget to put spaces in between the views instead of using an Expanded and Align widget on the same Text.
I made modifications to your code and came up with the desired output:
Scaffold(
backgroundColor: Colors.pink[200],
body: Padding(
padding: EdgeInsets.fromLTRB(30, 40, 30, 10),
child: SizedBox.expand( // new line
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Spacer(), // new line
Text(
'Wedding Organizer',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontWeight: FontWeight.bold,
fontSize: 35,
color: Colors.white),
),
Text(
'Pre-wedding, Photo, Party',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 25.5,
color: Colors.white),
),
SizedBox(height: 20.0),
RaisedButton(
child: Text('Our services',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.white)),
color: Colors.red,
onPressed: () {},
),
Spacer(), // new line
Text('345 Moo 1 Tasud Chiang Rai, Thailand',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.grey[300]))
],
),
),
),
);
RESULT:
Here is a code what you want.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.pink[200],
body: Padding(
padding: EdgeInsets.fromLTRB(30, 40, 30, 10),
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Wedding Organizer',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'SourceSansPro',
fontWeight: FontWeight.bold,
fontSize: 35,
color: Colors.white),
),
Text(
'Pre-wedding, Photo, Party',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 25.5,
color: Colors.white),
),
SizedBox(height: 20.0),
RaisedButton(
child: Text('Our services',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.white)),
color: Colors.red,
onPressed: () {},
),
],
),
),
Text('345 Moo 1 Tasud Chiang Rai, Thailand',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 17,
color: Colors.grey[300])),
],
),
),
),
);
}
}
Related
I want to achieve this in my app
For now, I have this:
and, I want this:
This is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LogInEnterEmailPassword extends StatefulWidget {
const LogInEnterEmailPassword({Key? key}) : super(key: key);
#override
State<LogInEnterEmailPassword> createState() => _LogInEnterEmailPasswordState();
}
class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffF6F6F6),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Enter email",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),),
SizedBox(height: 20,),
Text("______________________________",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xffD7D7D7),
),),
SizedBox(height: 110,),
Text("Enter password",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),),
SizedBox(height: 25,),
Text("______________________________",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xffD7D7D7),
),),
SizedBox(height: 110,),
Icon(Icons.arrow_forward,
size: 40,
color: Color(0xff7E7E7E),)
],
),
)
);
}
}
What I want is to be able to write text inside the "________________________" field, which the user can log in into the app, for now I'm doing the front end, I'm thinking about using node.js to backend further
Thank you in advance
You are having large-sized of SizedBox(height:110) between widgets. that's why you are getting large spaces, you can reduce the height value, and play with the height:x value.
Also use crossAxisAlignment: CrossAxisAlignment.start, on the Column()
Update: to take user input, use TextField
class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffF6F6F6),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
TextField(
decoration: InputDecoration(
hintText: "email",
border: OutlineInputBorder(),
),
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
SizedBox(
height: 10,
),
TextField(
decoration: InputDecoration(
hintText: "Enter password",
border: OutlineInputBorder(),
),
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
],
),
),
);
}
}
There are others decoration can be used like OutlineInputBorder.
You can check more about
InputDecoration
TextField
import 'package:flutter/material.dart';
class DraftPage extends StatefulWidget {
DraftPage({Key key}) : super(key: key);
#override
_DraftPageState createState() => _DraftPageState();
}
class _DraftPageState extends State<DraftPage> {
#override
Widget build(BuildContext context) {
final bottomTextStyle = TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.red,
);
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Container(
alignment: Alignment.center,
width: 300,
height: 57,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'AB',
style: bottomTextStyle,
),
TextSpan(
text: 'CD',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
textAlign: TextAlign.center,
),
),
);
}
}
As you can see, the AB and EF are at the bottom of CD though I had set TextAlign.center.
Is there any way let AB CD EF align vertical center?
Result
Code
Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(
text: 'AB',
style: bottomTextStyle,
),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Text(
'CD',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
),
try this:
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: 'AB\n',
style: bottomTextStyle,
),
TextSpan(
text: 'CD\n',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),
),
TextSpan(
text: 'EF',
style: bottomTextStyle,
),
],
),
textAlign: TextAlign.center,
),
You can use row to center in a line
Container(
width: 300,
height: 57,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("AB", style: bottomTextStyle,),
Text("CD", style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.blue,
),),
Text("EF", style: bottomTextStyle,),
],
)
),
Layout
I've got a Row with 'Long Text', divider and 'Text'. How can i align them properly, so the divider would always be at center of the screen (I added a red rectangle to ease positiong of the divider relative to the center). Also, the content of 'Text', so it could occupy more or less space. Here is my code:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
SizedBox(height: 100),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Long text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
SizedBox(
width: 12,
),
Container(height: 16, width: 1, color: Colors.orange),
SizedBox(
width: 12,
),
Text(
"Text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 14,
decoration: TextDecoration.underline),
),
],
),
SizedBox(height: 20),
Center(child: Container(color: Colors.red, width: 3, height: 20))
],
),
);
}
}
Thanks in advance.
You can wrap your texts with Expanded and then with Center.
I tried this snippet locally and it works as described:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Center(
child: Text(
"Long text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
),
),
SizedBox(
width: 12,
),
Container(height: 16, width: 1, color: Colors.orange),
SizedBox(
width: 12,
),
Expanded(
child: Center(
child: Text(
"Text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 14,
decoration: TextDecoration.underline),
),
),
),
],
),
I would like to know if it is possible to have card widgets as the items in a dropdownmenu button in flutter.
I have tried, but I haven't managed to make the cards visible in the dropdown.
Below are the codes
The class for the cards
class AccountContainer extends StatefulWidget {
#override
_AccountContainerState createState() => _AccountContainerState();
}
class _AccountContainerState extends State<AccountContainer> {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.symmetric(vertical: 15.0),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[300],
),
borderRadius: BorderRadius.circular(25.0)
),
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Saving Account',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),),
SizedBox(height: 5.0,),
Text('Savings XXX-X-XX563-9',
style: TextStyle(
fontSize: 10.0,
color: Colors.grey[900],
),),
SizedBox(height: 15.0,),
Container(
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
text: '56,302.56',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
children: <TextSpan> [
TextSpan(text: 'THB',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold
),),
],
),
),
],
),
),
],
),
),
),
Card(
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Salary Account 2',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),),
SizedBox(height: 5.0,),
Text('Savings XXX-X-XX563-9',
style: TextStyle(
fontSize: 10.0,
color: Colors.grey[900],
),),
SizedBox(height: 15.0,),
Container(
child: Row(
children: <Widget>[
RichText(
text: TextSpan(
text: '89,302.56',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
children: <TextSpan> [
TextSpan(text: 'THB',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold
),),
],
),
),
],
),
),
],
),
),
),
],
),
);
}
}
Calling the card class
class AccountSelections extends StatefulWidget {
#override
_AccountSelectionsState createState() => _AccountSelectionsState();
}
class _AccountSelectionsState extends State<AccountSelections> {
int accountSelected = 0;
var accountNames;
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(width: 419.0, height: 150.0),
child:
DropdownButton(
icon: Icon(Icons.keyboard_arrow_down,
color: Colors.blue[500],),
isExpanded: true,
value: accountSelected,
onChanged: (value) {
setState(() {
accountSelected = value;
});
},
items: accountNames.map((value) {
return DropdownMenuItem(
value: AccountContainer(),
child: Text(value),
);
})?.toList(),
),
);
}
}
Wrap you Text(value) widget with card and give elevation to card
today I am trying to make sticker.ly app UI in a flutter. But I stuck in adding space between underline and text. here is my code
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(13),
margin: MediaQuery.of(context).padding,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
SizedBox(width:8),
Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
SizedBox(width:8),
Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
],
),
],
),
),
],
),
);
}
}
and here I want to add space between underline and Text('For You') . is there any way to do this in a much better way?
Here's a simple hacky way to do it:
Text(
"Forgot Password?",
style: TextStyle(
shadows: [
Shadow(
color: Colors.red,
offset: Offset(0, -5))
],
color: Colors.transparent,
decoration:
TextDecoration.underline,
decorationColor: Colors.blue,
decorationThickness: 4,
decorationStyle:
TextDecorationStyle.dashed,
),
)
I wrote an article about text underlining with a few other solutions but this is my favorite.
You can try something like this:
Container(
padding: EdgeInsets.only(
bottom: 3, // This can be the space you need between text and underline
),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(
color: Colors.black,
width: 1.0, // This would be the width of the underline
))
),
child: Text(
"For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
,),)
after a lot of tries I am able to resolve by issue. Here is my code
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(13),
margin: MediaQuery.of(context).padding,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
SizedBox(width:8),
Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
SizedBox(width:8),
Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
],
),
Row(children: <Widget>[
Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
child: Container(
height: 3,
width: 52,
color: Colors.black,
),
),
],),
],
),
),
//search bar layout
Container(
child: Column(children: <Widget>[
],),
),
],
),
);
}
}
Little improved version of https://stackoverflow.com/a/64839295/7683297
Text(
cohort.name,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle((
height: 1.5,
shadows: [
Shadow(
color: Colors.black,
offset: Offset(0, -5))
],
color: Colors.transparent,
decoration: TextDecoration.underline,
decorationColor: Colors.black,
),
Here's my non-hacky way to do it (hack wasn't working for me):
IntrinsicWidth(
child: Column(
children: [
Text(dateRange, style: _jobTitleStyle(context)),
Container(height: 1, color: Colors.white),
],
),
),
Draw a line with a Container like so. Then shrink it to match the size of Text by using IntrinsicWidth (note, this may have performance impact if overused).