How to center align widget in Flutter form on web - flutter

Question

I am building a flutter project on both app and web. I am having a couple of issues with the login page. First my column widget fills the whole width on Flutter web but I want it to be more central. Secondly I am trying to center align the Don't have an account? Sign up button which has found itself aligning to the left. Please may someone assist. Here's my code and a couple of screenshots
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Card(
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) =>
value!.isEmpty ? 'Email cannot be empty' : null,
onSaved: (value) => _email = value!,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: 'Email',
hintText: 'Email',
border: OutlineInputBorder(),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) =>
value!.isEmpty ? 'Password cannot be empty' : null,
onSaved: (value) => _password = value!,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: 'Password',
hintText: 'Password',
border: OutlineInputBorder(),
),
obscureText: true,
),
),
Padding(
padding: const EdgeInsets.all(0),
child: TextButton(
onPressed: () {
Navigator.pushNamed(context, '/resetpassword');
},
child: const Text('Forgot Password?'),
style: TextButton.styleFrom(
primary: Colors.black,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: validateAndSubmit,
child: const Text('Login'),
style: ElevatedButton.styleFrom(
primary: Colors.black,
onSurface: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
const Text('Dont have an account?'),
TextButton(
onPressed: () {
Navigator.pushNamed(context, '/signup');
},
child: const Text(
'Signup',
style: TextStyle(fontWeight: FontWeight.bold),
),
style: TextButton.styleFrom(
primary: Colors.black,
),
),
],
),
),
],
),
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);

Answer 1

To center the 'Dont have an account?' text and 'Signup' TextButton,
use mainAxisAlignment in Row.
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,//<-- this
children: [
const Text('Dont have an account?'),
TextButton(
onPressed: () {
Navigator.pushNamed(context, '/signup');
},
child: const Text(
'Signup',
style: TextStyle(fontWeight: FontWeight.bold),
),
style: TextButton.styleFrom(
primary: Colors.black,
),
),
],
),
),
To responsive web and app,
I use this method,
void main() async {
runApp(
const ResponsiveLayout(),
);
}
In my ResponsiveLayout const webScreenSize = 600;
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > webScreenSize) {
//webscreen
return widget.webScreenLayout; // <-- send user Web screen
} else {
//mobile screen
return widget.mobileScreenLayout; // <-- send user mobile screen
}
},
);
}
Read more about LayoutBuilder -
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html