Task 2 Widget Catalog

Here are a few Widgets you will be needing for this task, make sure you read about them and their extensive functionality can be understood by googling them or watching a youtube tutorial on how to use them.

AppBar

To insert an App bar in an app, flutter provides it as a property in the Scaffold widget.

@override

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Klimatic'),backgroundColor: Colors.deepOrange,),  
      //This adds an AppBar which contains Klimatic as the title and has a deeporange colour
      body: Center(child: Text('My Page!')),

You can see the full documentation for the AppBar class, here

Scroll down to the properties section to see what other properties you can add.

Icon

To insert icons into your app, you can use the icon class

Row(
     children: <Widget>[
         Container(child: Icon(Icons.star_border,color: Colors.deepOrange,),
             padding: EdgeInsets.all(20),),
         Container(child: Icon(Icons.people,color: Colors.deepOrange,),
              padding: EdgeInsets.all(20),),
        ],
    )

// This inserts a Row of two icons

You can see the full documentation for the Icon class, here

The list of all icons available in flutter is given here, under the Constants heading

Text

The Text widget displays a string of text with a single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints

Text(
  'Hello, How are you?',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

// This inserts a Text which reads, "Hello, How are you?" 
// The text is aligned to the centre of the widget, the Text class is a child of.
// The style parameter can be used for changing the colour, font height, font-weight and many other properties

You can see the full documentation for the Text class, here

Column

A widget that displays its children in a vertical array. The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10),
              child: Text('Deliver features faster'),),
            Container(
              padding: EdgeInsets.all(10),
              child: Text('Craft beautiful UIs'),)
          ],
        )

// This adds a Column of 2 Texts

You can see the full documentation of the Column class, here

Circular Progress Indicator

CircularProgressIndicator can be used as the loading animation you see when an application is busy, or it can also be used to show the progress in terms of a pie chart or an arc

CircularProgressIndicator(
                              value: 0.8,
                              valueColor: AlwaysStoppedAnimation(Colors.cyan),
                              strokeWidth: 8.0,
                          )

You can see the full documentation of the CircularProgressIndicator class, here

Stack

It is a widget that positions its children relative to the edges of its box. This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom

Stack(
  children: <Widget>[
    // Max Size
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
      height: 300.0,
      width: 300.0,
    ),
    Container(
      color: Colors.pink,
      height: 150.0,
      width: 150.0,
    )
  ],
),

The above code forms a stack of widgets as shown below:

You can see the documentation for the Stack class, here

ListView

Since the Column widget is not scrollable, we use the ListView class to display widgets vertically and to be able to scroll if the size of the widgets is greater than the size of the screen.

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 350,
      color: Colors.red,
    ),
    Container(
      height: 350,
      color: Colors.green,
    ),
    Container(
      height: 350,
      color: Colors.blue,
    ),
  ],
)

As you can see in the above image, the blue container cannot fit in the screen, so we can scroll down in the list. If you would have used the Column widget instead of ListView, it would have shown an overflow.

You can see the full documentation of the ListView class, here