CODEWITHSUNDEEP
user-interfacedartflutterflutter-layout
Rémy Menard
Rémy Menard

Reputation: 64

How to make a column that fit all the screen in Flutter

ui

I am starting flutter but I cannot figure out how to divide by 2 a column widget and make it fit all the screen as shown in the picture.

Upvotes: 2

Views: 6876

Answers (1)

Butzlabben
Butzlabben

Reputation: 193

There you go

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(child: Container(color: Colors.blue)),
        Expanded(child: Container(color: Colors.lightBlueAccent))
      ],
    );
  }
}

How it is done:

  1. I am running an app via the runApp method
  2. I create a column and place essentially containers with the colours in it
  3. But the containers don't have any size, so they are not visible
  4. With the expanded widget I let a widget know to be as big as possible.
  5. As I have two expanded widgets, they have the same size.

Voila
Screenshot from emulator device

Upvotes: 5

Related Questions