I’ve tried using mainAxisalignment, and even wrapped it into a Align property and a sized box property but nothing seems to be working. I am trying to align both the form and the button presented into the middle of the screen. I’d like to know how I can solve this and why it wasn’t moving or working before.
Code:
import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
home: Scaffold(body: MyCustomForm()),
debugShowCheckedModeBanner: false,
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyCustomFormState>.
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return SizedBox(
child: Align(
alignment: Alignment.bottomCenter,
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: const Text('Submit'),
),
],
),
)));
}
}
4
Answers
Remove your
SizedBox
andAlign
widget and try my below code hope its help to you.Wrap your
Form
withCenter
widget and set column’smainAxisSize
tomin
, like this:Add
mainAxisAlignment: MainAxisAlignment.center
to your Column.Try to make the column main axis aligment center
then you can remove the align widget