I wrote a flutter app that uses a column widget with TextFormField and some title, and now I want to place another text widget on the bottom of the screen, I tried use the Align widget but it seems to work for me only when I use it without any other widgets, when I use it inside the column widget it not working and have no effect and place it right under the previous widget. (I tried to use the Expanded widget as well but it not working either.) Someone know how can I fix it?
I also can't rounded the "create account" container borders so if someone know how can I also do that it will be much appreciated
this is my code:
// imports...
class CreateName extends StatefulWidget {
const CreateName({Key? key, this.phoneNumber, this.userId}) : super(key: key);
final phoneNumber;
final userId;
@override
_CreateNameState createState() => _CreateNameState(phoneNumber, userId);
}
class _CreateNameState extends State<CreateName> {
late final phone;
late final uid;
late double _formHeight;
late String username;
final _varKey = GlobalKey<FormState>();
Color buttonColorBack = const Color(0xDCDCDCDC);
Color buttonColorText = Colors.black;
Color saveButtonColorText = const Color(0xDCDCDCDC);
_CreateNameState(this.phone, this.uid);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
if (size.height <= 736) {
_formHeight = (size.height * .05) 6;
} else {
_formHeight = size.height * .048;
}
return Scaffold(
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(
FocusNode(),
),
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: size.height - 90,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Stack(
alignment: Alignment.topLeft,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Padding(
padding: EdgeInsets.only(
top: size.height * .006,
left: size.width * .03,
),
child: SvgPicture.asset(
"assets/arrow-back.svg",
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: size.height * .18,
),
child: Center(
child: Text(
"Create a Username",
style: TextStyle(
fontSize: size.width * .066,
letterSpacing: size.width * .015,
fontWeight: FontWeight.w300,
),
),
),
),
Padding(
padding: EdgeInsets.only(
top: size.height * .015,
),
child: Center(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: size.width * .045,
),
height: _formHeight,
child: Form(
key: _varKey,
child: TextFormField(
style: TextStyle(
fontSize: size.width * .035,
),
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(
0,
10,
0,
0,
),
hintText: 'Username',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(7.0),
borderSide: const BorderSide(
color: Colors.black,
width: 1.25,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(7.0),
borderSide: const BorderSide(
color: Colors.black,
width: 1.5,
),
),
),
autofocus: false,
cursorColor: Colors.black,
textAlign: TextAlign.center,
onChanged: (input) {
setState(() {
if (input.length > 1) {
buttonColorBack = Colors.black;
buttonColorText = Colors.white;
} else if (input.length < 1) {
buttonColorBack = saveButtonColorText;
buttonColorText = Colors.black;
}
});
},
onSaved: (input) async {
username = input!;
},
),
),
),
),
),
GestureDetector(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: size.height * .01,
horizontal: size.width * .02,
),
child: Container(
height: _formHeight,
color: buttonColorBack,
child: Center(
child: Text(
"Create account",
style: TextStyle(
fontSize: size.width * .035,
color: buttonColorText,
),
),
),
),
),
onTap: () {
_varKey.currentState!.save();
if (username.length > 1) {
loginUser(uid, phone, username);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ClientHomePage(),
),
);
} else {
print("enter username");
}
},
),
Align( // here is the widget that I want to place in the bottom of the screen
alignment: Alignment.bottomCenter,
child: Text("test"),
),
],
),
),
),
),
),
);
}
}
CodePudding user response：
the reason is that Column's height is not fullscreen. It just has enough height to show all widgets in it, so alignment will not help in this situation. But you can use Spacer widget which will take all available space on screen in Column.
For example:
Column(
children: [
widgets
...
const Spacer(),
Text('Hello world!'), //widget which you want to be at the bottom of screen
],
),
If you want to add rounded borders to container add decoration. Notice that you can't use decoration and color parameters at the same time, but you can specify color in decoration!
Container(
decoration: BoxDecoration(
color: Colors.black, //or any other color
borderRadius: BorderRadius.circular(16.0) //this value changes borderRadius,
boxShape: BoxShape.circle //if you need a circle container use this instead of border radius
),
)
Attention! You can't use Spacer() if Column is in ScrollView. If there is not lots of content in Column, and every screen you need can handle it do not use ScrollView.