core114
Reputation: 5325
How to align flutter text
I'm a beginner in Flutter, I've added my flutter page to Text field and Text, anyone know how to align last name like a right side text filled.
Here the my code:
import 'dart:ui';
import 'package:crmapp/pages/create_password/password_screen.dart';
import 'package:crmapp/widgets/components/alert.dart';
import 'package:crmapp/widgets/components/page_animation.dart';
import 'package:crmapp/widgets/theme/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:crmapp/provider/theme_provider.dart';
class SignUpScreen extends StatefulWidget {
@override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State< SignUpScreen > {
final _controller = TextEditingController();
//validation controller
TextEditingController fNameController = new TextEditingController();
TextEditingController lNameController = new TextEditingController();
TextEditingController nickNameController = new TextEditingController();
TextEditingController phoneController = new TextEditingController();
bool _isButtonEnabled = false;
//final _controller = TextEditingController();
bool isConfirm=false;
check (BuildContext context){
if(fNameController.text.isNotEmpty &&
lNameController.text.isNotEmpty &&
nickNameController.text.isNotEmpty &&
phoneController.text.isNotEmpty){
setState(() {
_isButtonEnabled = true;
});
} else {
setState(() {
_isButtonEnabled = false;
});
}
}
checks (BuildContext context){
if(phoneController.text.isEmpty){
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Phone number is required !",);
}
);
}else if(phoneController.text.length > 0 && phoneController.text.length < 10){
isConfirm = true;
showDialog<void>(
context: context,
builder: (BuildContext dialogContext) {
return Alert(title: "Alert !!!",subTile: "Invalid phone number !",);
}
);
}
}
String? validateMobile(String value) {
String pattern = r'(^[0-9]*$)';
RegExp regExp = new RegExp(pattern);
if (value.length == 0 ) {
return "Invalid phone no";
}
return null;
}
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
/* double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;*/
Provider.of<ThemeProvider>(context).themeMode == ThemeMode.dark
? 'DarkTheme'
: 'LightTheme';
return Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
_signUp(),
],
),
),
);
}
Widget _signUp() {
return Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476),
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Form(
key: formKey,
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,fontFamily: "medium",
fontWeight: FontWeight.w800,
),
),
],
),
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Flexible(
flex: 0,
child: Text(
'First Name',
style:
TextStyle(
fontSize: 15,
fontFamily: "regular",
),
)
),
SizedBox(
width:0,
),
Flexible(
flex: 5,
child: Text(
'Last Name',
style:
TextStyle(
fontSize: 15,
fontFamily: "regular",
),
)
), SizedBox(
width: 0,
),
],
), SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
Flexible(
flex: 1,
child: TextField(
controller: lNameController,
onChanged: (val){
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
),
SizedBox(
width: 10,
),
Flexible(
flex: 1,
child: TextField(
controller: lNameController,
onChanged: (val){
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/),
),
),
],
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextField(
/* keyboardType: TextInputType.emailAddress,*/
controller: nickNameController,
onChanged: (val){
check(context);
},
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/*prefixIcon: Icon(
Icons.people_outline_rounded,
color: Color(0xFFE1E8F7),
)*/),
),
SizedBox(
height: 20.0,
),
Text(
'Mobile Number',
style:
TextStyle( fontSize: 15,
fontFamily: "regular",),
),
SizedBox(
height: 12.0,
),
TextFormField(
controller: phoneController,
onChanged: (val){
check(context);
},
/*maxLength: 10,*/
/* validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},*/
keyboardType: TextInputType.phone,
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "071 *** ****",
),
),
SizedBox(
height: 20.0,
),
Container( alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 0),
child: Row(
children: [
Expanded(
child: MaterialButton(
height: 44,
onPressed: () {
FocusScope.of(context).requestFocus(FocusNode());
/* Navigator.push(context, SlidePageRoute(page:PasswordScreen()));*/
},
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8)),
color: _isButtonEnabled ? Color(0xFF2A3476) : Color(0x201E1E99),
elevation: 0,
highlightElevation: 0,
child: Container(
child: Text(
"Next",
style: TextStyle(color: m_fillColor,fontSize: 18,fontWeight: FontWeight.w600 ,
fontFamily: "regular",),
),
),
),
),
],
),
),
/* Container(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF2A3476),
Color(0xFF2A3476)
])),
child: Text(
'Next',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),*/
SizedBox(
height: 4.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Already have an account?",
style: TextStyle(color: m_titleColor,fontWeight: FontWeight.normal, fontFamily: "regular")),
TextSpan(
text: " Sign in",
style: TextStyle(
color: Color(0xFF2A3476),
fontWeight: FontWeight.w600,
fontFamily: "medium")),
]),
)
],
), SizedBox(
height:200.0,
),
],
),
),
),
],
),
),
),
),
);
}
}
Upvotes: 0
Views: 592
Answers (4)
Simon Sot
Reputation: 3136
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
body: Center(
child: Row(children: [
Expanded(child: Container(color: Colors.lightGreen, child: Text('TextA'),)),
Expanded(child: Container(color: Colors.red, child: Text('TextB'),)),
],)
),
),
);
}
}
Upvotes: 1
Jahidul Islam
Reputation: 12575
Let's try
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
'First Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
)),
Expanded(
child: Text(
'Last Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
)),
SizedBox(
width: 0,
),
],
)
Upvotes: 1
Mobina
Reputation: 7109
You can use a two Column layout wrapped with a Row:
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, sign up to",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
Text(
"continue",
style: TextStyle(
fontSize: 22,
fontFamily: "regular",
fontWeight: FontWeight.w300,
color: Colors.black,
),
),
SizedBox(
height: 20.0,
),
Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'First Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
TextField(
controller: lNameController,
onChanged: (val) {
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/
),
),
],
),
),
SizedBox(
width: 16,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Last Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
TextField(
controller: lNameController,
onChanged: (val) {
check(context);
},
/* keyboardType: TextInputType.emailAddress,*/
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8),
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Color(0xFFE1E8F7),
hintText: "",
/* prefixIcon: Icon(
Icons.people_outline_rounded,
color: Colors.grey[600],
)*/
),
),
],
),
),
],
),
SizedBox(
height: 20.0,
),
Text(
'Nick Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
Result:
Upvotes: 1
Jaimil Patel
Reputation: 1347
You can use mainAxisAlignment property of Row widget
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'First Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
),
Text(
'Last Name',
style: TextStyle(
fontSize: 15,
fontFamily: "regular",
),
)
])
Upvotes: 0
Related Questions
- How do align text vertical in flutter?
- How to align text in flutter
- How to align text in a way it starts from a margin in flutter?
- Align Text in Flutter
- Why the text is not align center in flutter
- How to align the text position in flutter
- How to align Text properly in flutter?
- How to align text with 2 lines with a text of one line in flutter
- Flutter text left alignment
- How to align text inside Positioned widget in flutter?