Reputation: 151

MainAxisAlignment under SingleChildScrollView is not working

I developed a login screen in which first i get the render flex error when i open the keyboard so for that i wrap my widgets in SingleChildScrollView, but after that mainAxisAlignment of Column is not working but when i removed SingleChildScrollView then everything working fine except render flex error. i don't know what to do kindly help please. Following is the code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LoginScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.blue,
              ),
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 70, left: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Icon(
                              Icons.keyboard_arrow_up,
                              size: 30,
                              color: Colors.white,
                            ),
                            Text(
                              "Login Screen",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height * 0.6,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 50, left: 20),
                            child: Text(
                              "Welcome",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 20),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              decoration: InputDecoration(
                                  icon: Icon(Icons.email),
                                  hintText: "Enter User Name"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              obscureText: true,
                              decoration: InputDecoration(
                                  icon: Icon(Icons.vpn_key),
                                  hintText: "Enter Password"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15),
                                    side: BorderSide(width: 2, color: Colors.blue)),
                                textColor: Colors.blue,
                                child: Text(
                                  "Sign In",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 16),
                                ),
                                onPressed: () {},
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              "Forgot Password",
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                textColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15)
                                ),
                                child: Text("Create Account"),
                                color: Colors.blue,
                                onPressed: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

Upvotes: 15

Answers (6)

Furkan Cetintas

Reputation: 822

You can try this code blocks

CustomScrollView(
            scrollDirection: Axis.vertical,
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('test'),
                    for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
                  ],
                ),
              ),
            ],
          ),

Upvotes: 17

MD MEHEDI HASAN

Reputation: 2490

Set the alignment of the outer container, then wrap the column with singleChildScrollView.

Container(
  alignment: Alignment.center, //Set container alignment  then wrap the column with singleChildScrollView
  child: SingleChildScrollView(
     child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: []
),
);

Upvotes: 7

RAHUL RAJ

Reputation: 1

This will work...

Set the alignment of the outer container as alignment.bottomCenter, then wrap the column with singleChildScrollView. It will definitely works. Thankyou.

Upvotes: 0

Mohammad Shamsi

Reputation: 571

you can Column wrap with a Container...

full code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LoginScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.blue,
              ),
              SingleChildScrollView(
                child: Container(
                  child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 70, left: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Icon(
                              Icons.keyboard_arrow_up,
                              size: 30,
                              color: Colors.white,
                            ),
                            Text(
                              "Login Screen",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ),
                    ),
                    Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height * 0.6,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 50, left: 20),
                            child: Text(
                              "Welcome",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 20),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              decoration: InputDecoration(
                                  icon: Icon(Icons.email),
                                  hintText: "Enter User Name"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: TextField(
                              obscureText: true,
                              decoration: InputDecoration(
                                  icon: Icon(Icons.vpn_key),
                                  hintText: "Enter Password"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15),
                                    side: BorderSide(width: 2, color: Colors.blue)),
                                textColor: Colors.blue,
                                child: Text(
                                  "Sign In",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 16),
                                ),
                                onPressed: () {},
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              "Forgot Password",
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20),
                            child: Container(
                              width: double.infinity,
                              height: 50,
                              child: FlatButton(
                                textColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15)
                                ),
                                child: Text("Create Account"),
                                color: Colors.blue,
                                onPressed: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

Upvotes: 0

Yuzan Khadka

Reputation: 59

After wrapping Column with SingleChildScrollView wrap it with Center widget.

Upvotes: 5

Hassan Hammad

Reputation: 312

Yeah MainAxisAlignment' property of a 'Column' does not work when you wrap the 'Column' in 'SingleChildScrollView'. I dont know the reason, but thats how it is.

I use 'SizedBox(height: xx)' to give space between widgets inside the 'Column' when i absolutely need a scroll view, otherwise i tend not to use the 'SingleChildScrollView'.

Upvotes: 2

MainAxisAlignment under SingleChildScrollView is not working

Answers (6)

Related Questions