skip to Main Content

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


  1. Remove your SizedBox and Align widget and try my below code hope its help to you.

    Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
            const SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    
    Login or Signup to reply.
  2. Wrap your Form with Center widget and set column’s mainAxisSize to min, like this:

    Center(//<-- add this
          child: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,// <--- add this
          children: [
            TextFormField(
              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'),
            ),
          ],
        ),
      ))
    

    enter image description here

    Login or Signup to reply.
  3. Add mainAxisAlignment: MainAxisAlignment.center to your Column.

    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(
                    mainAxisAlignment: MainAxisAlignment.center,
                    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'),
                      ),
                    ],
                  ),
                )));
      }
    }
    
    Login or Signup to reply.
  4. Try to make the column main axis aligment center

    mainAxisAlignment: MainAxisAlignment.center,
    

    then you can remove the align widget

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search