How to separate UI using lines in flutter?

Question

I have a flutter apllication. In my loging component, I want to separate bottom half of the UI into 4 parts as in the following image

So far, I have implemented upto the Login button. What I don't understand is how to seperate the rest of the UI as in the image. After separating, I should be able to add an image to each separated cell.

How can I achieve this? Thank you for your kind help!

My Implementation upto Login button:-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:bank_app/screens/AccountSummary.dart';

class Login extends StatelessWidget{

  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.white)
                  ),
                  color: Colors.white,
                  textColor: Colors.red,
                  onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => AccountSummary()));},
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Image.asset("assets/logo.png", fit: BoxFit.cover, ),
            centerTitle: true,
          ),
        ),
      body: Container(
          margin: const EdgeInsets.only(top: 10),
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,

                children: [
                  Container(
                    margin: const EdgeInsets.only(left: 25, top: 50, right: 25),
                    child:_inputField('UserName', Colors.white),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25, top: 10, right: 25),
                    child: _inputField('Password', Colors.white),
                  ),
                  Container(
                    margin: const EdgeInsets.only( top: 15),
                    child: Text('Forgot Password?', style: TextStyle(color: Colors.white),),
                  ),
                  Container(
                    margin: const EdgeInsets.only( top: 25),
                    child: _buttons('Login', context),
                  ),
                ],
              )
          )
      ),
    );
  }

}

I think you are looking for Table. https://www.youtube.com/watch?v=_lbE0wsVZSw — CoderUni, Aug 31 '20 at 09:14
I tried tables. But I don't understand how to stretch the row to the border of the UI @Uni — Manujaya Premathilaka, Aug 31 '20 at 09:21
you can use expanded / double.infinity/ MediaQuery width. Make the table take the whole space — CoderUni, Aug 31 '20 at 09:24
Does this answer your question? [Flutter - Layout a Grid](https://stackoverflow.com/questions/44183795/flutter-layout-a-grid) — nvoigt, Aug 31 '20 at 10:36

score 1 · Answer 1 · answered Aug 31 '20 at 09:19

You can use a Divider like this:

Column(
    children: <Widget>[
      Container(
        height: 100,
        color: Colors.red,
      ),
      Divider(
        height: 50,
        thickness: 5,
      ),
      Container(
        height: 100,
        color: Colors.blue,
      ),
    ],
  )

score 1 · Accepted Answer · answered Aug 31 '20 at 09:24

1

Better to use GridView in this situation. Tutorial for your reference: https://youtu.be/wsPGFdrtj-U

answered Aug 31 '20 at 09:24

theCaptainXgod

223
1
7

How to separate UI using lines in flutter?

2 Answers2