Tag: column widget

Referring to the previous blog post First Flutter App where we used a single named argument ‘home’ for ‘MaterialApp()’ widget. ‘home’ takes Scaffold() widget as argument. We provided ‘appBar’ and ‘body’ named arguments to the Scaffold() widget.

1. First argument ‘appBar’ takes ‘AppBar()’ as argument and this ‘AppBar’ takes ‘title’ named argument which at the end takes a ‘Text()’ widget.
2. Second argument ‘body’ takes a Text() widget.

Here is a recap of that code snippet.

return MaterialApp(
     /*
      * A Scaffold Widget provides a framework which implements the basic material design visual 
      * layout structure of the flutter app.
       */
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter App'),
        ), //AppBar()
        body: Text('Welcome to Flutter'),
      ), //Scaffold()
    ); //MaterialApp()

body is the place that takes all-white screen besides appBar. We can not provide second widget to body as it takes only one widget as a parameter.

To solve this problem, we’ll use Layout widgets (Column(), Row(), etc). For the sake of understanding, we’ll use Column() widget in this blog post.

Column Class: A widget that displays its children in a vertical array.

//File Name: main.dart
import 'package:flutter/material.dart';

/*
* The arrow function allows us to create a simplified function consisting of a single expression.
* We can omit the curly brackets and the return keyword
*/

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /*
      * A Scaffold Widget provides a framework which implements the basic material design visual
      * layout structure of the flutter app.
       */
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter App'),
        ),
        body: Column(
          children: <Widget>[
            Text('The question'),
            ElevatedButton(child: Text('Answer1'), onPressed: null,),
            ElevatedButton(child: Text('Answer2'), onPressed: null,),
            ElevatedButton(child: Text('Answer3'), onPressed: null,),
          ], //<Widget>[]
        ), //Column()
      ), //Scaffold()
    ); //MaterialApp()
  } //build()
} //MyApp()

Column() widget takes ‘children’ argument and we are passing a list of Widgets to that. First one is a Text() widget while rest of the three are ElevatedButton() widget.

ElevatedButton() widget takes two arguments.

1. Text() widget shows the button text.
2. onPressed takes a function argument but for now we are passing it null and because of null the button will be disabled to click/tap.

Output

The UI looks ugly but the point is to understand column widget. We’ll make the UI beautiful in next blog posts.

Happy coding!