I'm a student who is new to learning flutter. I want align my text and buttons to the centre of the screen. I use this code to align the centre. also, I used separate widgets to create them as shown in the code.
textAlign: TextAlign.center,
it doesn't work for me. also, the text box I created is not displaying at all. how to fix these errors on my app.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class babyNameScreen extends StatefulWidget {
const babyNameScreen({Key? key}) : super(key: key);
@override
_babyNameScreenState createState() => _babyNameScreenState();
}
class _babyNameScreenState extends State<babyNameScreen> {
@override
@override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => WelcomeScreen()));
},
),
),
body: Padding(
padding: const EdgeInsets.only(top: 40),
child: ListView(
children: [
StepText(),
SizedBox(
height: 25,
),
NameText(),
SizedBox(
height: 25,
),
EnterNameText(),
// SizedBox(
// height: 25,
// ),
TextBox(), //text field
ContinueButton(), //elevated button
],
),
),
);
}
}
Widget StepText() => Container(
child: Row(children: [
Text(
'STEP 2/5',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: Colors.deepPurple,
fontWeight: FontWeight.w700,
),
),
]),
);
Widget NameText() => Container(
child: Row(children: [
Text(
'What is her name?',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.w700,
),
),
]),
);
Widget EnterNameText() => Container(
child: Row(children: [
Text(
'Enter name of your new profile.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
]),
);
//text field
Widget TextBox()=> Container(
child: Row(
children: [
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
],
),
);
//elevated button
Widget ContinueButton()=> Container (
child: Row(
children: [
ElevatedButton(
onPressed: () {
//playSound(soundNumber);
},
child: Text('Continue'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.deepPurple),
),
),
],
),
);
CodePudding user response：
You can use this way to achieve the layout you want
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class babyNameScreen extends StatefulWidget {
const babyNameScreen({Key? key}) : super(key: key);
@override
_babyNameScreenState createState() => _babyNameScreenState();
}
class _babyNameScreenState extends State<babyNameScreen> {
@override
@override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => WelcomeScreen()));
},
),
),
body: Padding(
padding: const EdgeInsets.only(top: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StepText(),
SizedBox(
height: 25,
),
NameText(),
SizedBox(
height: 25,
),
EnterNameText(),
// SizedBox(
// height: 25,
// ),
TextBox(), //text field
ContinueButton(), //elevated button
],
),
),
);
}
}
Widget StepText() => Container(
child: Text(
'STEP 2/5',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: Colors.deepPurple,
fontWeight: FontWeight.w700,
),
),
);
Widget NameText() => Container(
child: Text(
'What is her name?',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.w700,
),
),
);
Widget EnterNameText() => Container(
child: Text(
'Enter name of your new profile.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
);
//text field
Widget TextBox()=> Container(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
);
//elevated button
Widget ContinueButton()=> Container (
child: ElevatedButton(
onPressed: () {
//playSound(soundNumber);
},
child: Text('Continue'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.deepPurple),
),
),
);
CodePudding user response：
Use, mainAxisAlignment: MainAxisAlignment.center in Row.
Like this,
Widget StepText() => Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center, // Add this line...
children: [
Text(
'STEP 2/5',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: Colors.deepPurple,
fontWeight: FontWeight.w700,
),
),
]),
);
For more info : https://docs.flutter.dev/development/ui/layout
For remove shadow of AppBar use elevation,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,)
For more info : https://api.flutter.dev/flutter/material/Material/elevation.html