How to create Column in Center of App with Left/Right margins?

Related searches

im new to Flutter. I have started learning a few days ago and am trying to grasp the concept of Rows and Columns.

I made a simple Page like this.

To explain my code I first make a Column to put everything in. Then i use a Row for the TopBar, and then another Row to put the things into the body, so that i can put a Column in the center of the Page, with a bit of space on both sides of it. I then pack Text and Button in a Column and insert it into the Column in the Middle of the Page.

import 'package:flutter/material.dart';

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


class MainPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
    Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
    Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
    Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
                  child: SizedBox(
                    child: Image.asset('assets/MenuIcon.png'),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
                  child: SizedBox(
                    child: Image.asset('assets/SearchIcon.png'),
                  ),
                ),
              ],
            ),
            Divider(height: 50,),
            Expanded(
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Container(),
                  ),
                  Expanded(
                    flex: 5,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Erwachsen werden",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                      ),
                                  onPressed: () {},
                                  color: Color1,
                                ),
                              ),
                            ),
                          ],
                        ),

                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Glückliches Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                  ),
                                  onPressed: () {},
                                  color: Color2,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Ab in das Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                                child: ButtonTheme(
                                  minWidth: 300,
                                  height: 70,
                                  child: FlatButton(
                                    shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                    ),
                                    onPressed: () {},
                                    color: Color3,
                                  ),
                                )
                            ),
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Alleine Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                      ),
                                  onPressed: () {},
                                  color: Color4,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:1,
                    child: Container(),
                  ),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

I feel like there is a lot of unnecessary Coding, but i can't seem to be able to improve it, with it working properly.

Can anybody Help improve my code? Simply what i want to achieve is a Column in the middle of the body with margin to the left and right of the screen, without a million lines of code.

Scaffold by default has an parameter for AppBar() use that for your app bar

and as per your layout I will suggest to use ListView() instead of Column()

using Listview will automatically scroll your page if length of your page extends and also has an parameter as padding using which you can add space on your left and right side

refer below mentioned code structure

Scaffold(
  appbar: AppBar(),
  body: ListView(
           padding: EdgeInsets.only(left:12.0,right:12.0),
           children: <Widget>[
                   //your list of widgets here
                      ],
        )
)

CSS: centering things, blocktext { margin-left: auto; margin-right: auto; width: 8em } <P class="blocktext ">This rather This rather narrow block of text is centered. Note that the lines� settings you chose for the left and right margins, column spacing, or paragraph indents are too large for the page width in some sections. I am just about through with an almost 500 page book and suddenly it gives me the above message when I tried to shift the writing on the pages slightly to one side.

Try this: Code example

Center(
            child: Container(
                margin: EdgeInsets.symmetric(horizontal: 10),
                height: 400,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Material(
                      color: Colors.transparent,
                      child: Image.asset(
                        "assets/images/logo.png",
                        height: 100,
                        width: 200,
                      ),
                    ),
                    //email


                TextFormField(
                  style: TextStyle(
                    fontFamily: "Light",
                    color: Theme.of(context).primaryColor,
                  ),
                  keyboardType: TextInputType.text,
                  textInputAction: TextInputAction.next,
                  cursorColor: Theme.of(context).primaryColor,
                  decoration: InputDecoration(
                    labelText: 'Username',
                    filled: true,
                    fillColor: Colors.white,
                  ),
                ),

                TextFormField(
                  style: TextStyle(
                    fontFamily: "Light",
                    color: Theme.of(context).primaryColor,
                  ),
                  keyboardType: TextInputType.visiblePassword,
                  textInputAction: TextInputAction.done,
                  cursorColor: Theme.of(context).primaryColor,
                  obscureText: passwordVisible,
                  controller: _passwordController,

                  decoration: InputDecoration(
                    labelText: 'Password',
                    filled: true,
                    fillColor: Colors.white,
                      onPressed: () {},
                    ),
                  ),
                ),

                Container(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text(
                      "Login",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontFamily: "Light",
                      ),
                    ),
                  ),
                ),
              ],
            )),
      )

13 ways to vertical center, An element with no intrinsic size can be “centered” by simply using equal bottom: 0; left: 0; right: 0; margin: auto; background: tomato; width: 50vw; height: has 100% height of the parent, then setting the vertical-align property to middle : .container{ display: flex; flex-direction: column; } .container::before,� For example, in a paragraph that is left-aligned (the most common alignment), the left edge of the paragraph is flush with the left margin. Vertical alignment determines the position of the text within a section of a document relative to the top and bottom margins, and is often used to create a cover page.

I removed unnecessary code ! It may help you !

Color color1 = const Color.fromRGBO(204, 126, 185, 100);

  Color color2 = const Color.fromRGBO(140, 235, 203, 100);

  Color color3 = const Color.fromRGBO(227, 225, 204, 100);

  Color color4 = const Color.fromRGBO(89, 130, 145, 100);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
                  child: SizedBox(
//                     child: Image.asset('assets/MenuIcon.png'),
                    child:Icon(Icons.menu,color:Colors.black)
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
                  child: SizedBox(
//                     child: Image.asset('assets/SearchIcon.png')
                    child:Icon(Icons.search,color:Colors.black)
                  ),
                ),
              ],
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left:50,right:50),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize:MainAxisSize.min,
                  children: <Widget>[
                    Text(
                      "Erwachsen werden",
                      style: TextStyle(
                        fontWeight: FontWeight.w200,
                        color: Colors.black,
                        fontSize: 28.0,
                      ),
                    ),
                    SizedBox(height: 10.0),
                    SizedBox(
                      width: double.infinity,
                      child: ButtonTheme(
                        minWidth: 300,
                        height: 70,
                        child: FlatButton(
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(13.0),
                            ),
                            onPressed: () {},
                            color: color1,
                            child: Text('Button')),
                      ),
                    ),
                    SizedBox(height: 10.0),
                    Text(
                      "Glückliches Leben",
                      style: TextStyle(
                        fontWeight: FontWeight.w200,
                        color: Colors.black,
                        fontSize: 28.0,
                      ),
                    ),
                    SizedBox(height: 10.0),
                    SizedBox(
                      width: double.infinity,
                      child: ButtonTheme(
                        minWidth: 300,
                        height: 70,
                        child: FlatButton(
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(13.0),
                            ),
                            onPressed: () {},
                            color: color2,
                            child: Text('Button')),
                      ),
                    ),
                    SizedBox(height: 10.0),
                    Text(
                      "Ab in das Leben",
                      style: TextStyle(
                        fontWeight: FontWeight.w200,
                        color: Colors.black,
                        fontSize: 28.0,
                      ),
                    ),
                    SizedBox(height: 10.0),
                    SizedBox(
                        width: double.infinity,
                        child: ButtonTheme(
                          minWidth: 300,
                          height: 70,
                          child: FlatButton(
                              shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(13.0),
                              ),
                              onPressed: () {},
                              color: color3,
                              child: Text('Button')),
                        )),
                    SizedBox(height: 10.0),
                    Text(
                      "Alleine Leben",
                      style: TextStyle(
                        fontWeight: FontWeight.w200,
                        color: Colors.black,
                        fontSize: 28.0,
                      ),
                    ),
                    SizedBox(height: 10.0),
                    SizedBox(
                      width: double.infinity,
                      child: ButtonTheme(
                        minWidth: 300,
                        height: 70,
                        child: FlatButton(
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(13.0),
                            ),
                            onPressed: () {},
                            color: color4,
                            child: Text('Button')),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Everything You Need To Know About Alignment In Flexbox , See the Pen Smashing Flexbox Series 2: center an item by Rachel If you have a flex-direction of row and are in a left to right language such If my flex-direction were column then align-content would work as in the following example. wrapper for your main page content by setting a margin left and right� The usual solution for this problem is to open the Columns dialog and, even though 1 is already selected for the number of columns, click on the One preset picture. This checks the "Equal column width" box; when that box is not checked, the column width is sometimes wider than the page margins instead of adjusting automatically.

How to Center Elements, How to Center Elements Option 1: Using Columns to Center Content On the left & right margins, click on the "px" next to the text input and select "auto" from� As a typical example, if you choose a paper size of Letter (8.5" wide) and try to set left and right margins of 4.5" each, the result would be a text area that's negative 0.5" wide. On the same Letter size paper, if you use the common left and right margins of 1.25" (leaving a 6" text column) and set a paragraph indent of 6", there is zero

Layout - dbc docs - Dash Bootstrap Components, The content on this page has been centered by wrapping it in a Container component. The layout of your app should be built as a series of rows of columns. 12 and increases the left margin of the column by that number of grid columns. By setting different sizes, orders and offsets for the different responsive tiers you� To set up asymmetrical left and right margins, you change the text frames directly on the master pages. For example, you could make the text frames on both the left and right pages appear on the right side of the page, leaving an area of white space on the left. You can divide a text frame into two or more equally spaced columns of equal widths.

Set the margins. Type numbers indicating the width of your margins in the Top, Bottom, Left, and Right fields. Only adjust the Gutter margin if you intend to use the document in a bound format, like a book or report, and you need space for the binding.

Comments
  • hi, if my answer helped you can you accept my answer as correct one.
  • Ok i will try that thank you! I'd love to give you an upvote, sadly i dont have the rep to do that.
  • Thank you very much! I see you used Padding on the column instead of an extra Row. Seems much more intuitive.
  • Hm ! If helped you don't forget to accept the answer or wait for someone will give you more flexible way ! Have a good day !