CODEWITHSUNDEEP
flutterflutter-layoutflutter-container
Viqtoh
Viqtoh

Reputation: 188

Can't center a column in a container

I've been trying to do this for a while and i just doesn't work. I've tried using Center() and it doesn't work even without errors. I also tried using

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

for the column also and it still didn't work. i've done something like this before but now i'm not sure if its because it's in a FractionallySizedBox() ,and i do need it to be in there. Here is the complete code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Align(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints contraints) {
            return AspectRatio(
              aspectRatio: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new FractionallySizedBox(
                    widthFactor: 0.7,
                    child: new Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(20),
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border.all(
                              color: Colors.black87,
                              width: 2,
                            )),
                            child: Image.asset(
                              'Assets/6.jpg',
                              color: Color.fromRGBO(255, 255, 255, 0.5),
                              colorBlendMode: BlendMode.modulate,
                            ),
                          ),
                        ),
                        FractionallySizedBox(
                          widthFactor: 0.85,
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  height: 50,
                                ),
                                TextField(
                                  autofocus: false,
                                  textAlign: TextAlign.center,
                                  keyboardType: TextInputType.text,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.face),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Username",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Username",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 12,
                                ),
                                TextField(
                                  keyboardType: TextInputType.visiblePassword,
                                  autocorrect: false,
                                  obscureText: true,
                                  textAlign: TextAlign.center,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.security),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Password",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Password",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 20,
                                ),
                                FlatButton(
                                  onPressed: () {},
                                  color: Colors.blueGrey,
                                  height: 40,
                                  minWidth: 150,
                                  child: Text("Login"),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}

and the output building this on Linux device:

App Image

Many thanks!

Upvotes: 1

Views: 438

Answers (2)

E.Benedos
E.Benedos

Reputation: 1767

I've cleaned you code a little bit and I've tried it on Android table and it works

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Center(
        child: Stack(
          children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.7,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                      color: Colors.black87,
                      width: 2,
                    )),
                    child: Image.asset(
                      'Assets/6.jpg',
                      color: Color.fromRGBO(255, 255, 255, 0.5),
                      colorBlendMode: BlendMode.modulate,
                    ),
                  ),
                ),
              ),
            ),
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.6,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 50,
                    ),
                    TextField(
                      autofocus: false,
                      textAlign: TextAlign.center,
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.face),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Username",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Username",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    TextField(
                      keyboardType: TextInputType.visiblePassword,
                      autocorrect: false,
                      obscureText: true,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.security),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Password",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Password",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    FlatButton(
                      onPressed: () {},
                      color: Colors.blueGrey,
                      height: 40,
                      minWidth: 150,
                      child: Text("Login"),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}

Upvotes: 1

Vignesh
Vignesh

Reputation: 215

In your code remove widthFactor: 0.85, then it'll be center aligned.

Upvotes: 0

Related Questions