AppBars and ListViews in Flutter

App layout is important so users see a clean, intuitive interface, making your app easy to navigate and use. All layout is done with widgets and each widget is responsible for its own layout.

There are predefined enums for a lot of layout, such as aligning a widget relatively,
Align( alignment: Alignment.bottomCenter,

Aligning a list of widgets
child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[

Aligning text:
Text( textAlign: TextAlign.center,

Route 

a route is just another name for the app page or screen.
Inside the MaterialApp, we often set the home property to a widget that is our home route.
Within our category route, we can also add an optional app bar,
The appBar is useful in telling the user where they are in the app and can also offer actions for the user.

A canonical app has a home page with some selections.
When you app is composed of 8 categories, each as a rectangular list item. To display this we could use a ListView widget, a list of rows, a table widget, or a wrap just to name some.

Among those  ListView has efficient scrolling and the child widgets are consistent.
Later for the responsive design you could use the Gridview for the landscape mode for responsive design.

import 'package:flutter/material.dart';
// 1. Check if we need to import anythingimport 'package:fluttery/category.dart';
// 2. Define any constantsfinal _backgroundColor = Colors.green[100];
/// Category Route (screen).////// This is the 'home' screen of the Unit Converter. It shows a header and/// a list of [Categories].////// While it is named CategoryRoute, a more apt name would be CategoryScreen,/// because it is responsible for the UI at the route's destination.class CategoryRoute extends StatelessWidget {
  const CategoryRoute();
  static const _categoryNames = <String>[
    'Length',    'Area',    'Volume',    'Mass',    'Time',    'Digital Storage',    'Energy',    'Currency',  ];
  static const _baseColors = <Color>[
    Colors.teal,    Colors.orange,    Colors.pinkAccent,    Colors.blueAccent,    Colors.yellow,    Colors.greenAccent,    Colors.purpleAccent,    Colors.red,  ];
  /// 3. Makes the correct number of rows for the list view.  ///  /// For portrait, we construct a [ListView] from the list of category widgets.  Widget _buildCategoryWidgets(List<Widget> categories) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) => categories[index],      itemCount: categories.length,    );  }

  @override  Widget build(BuildContext context) {
    // 4. Create a list of the eight Categories, using the names and colors    // from above. Use a placeholder icon, such as `Icons.cake` for each    // Category. We'll add custom icons later.
    final categories = <Category>[];
    for (var i = 0; i < _categoryNames.length; i++) {
      categories.add(Category(
        name: _categoryNames[i],        color: _baseColors[i],        iconLocation: Icons.cake,      ));    }

    // 5. Create a list view of the Categories    final listView = Container(
      color: _backgroundColor,      padding: EdgeInsets.symmetric(horizontal: 8.0),      child: _buildCategoryWidgets(categories),    );
    // 6. Create an App Bar    final appBar = AppBar(
      elevation: 0.0,      title: Text(
        'Unit Converter',        style: TextStyle(
          color: Colors.black,          fontSize: 30.0,        ),      ),      centerTitle: true,      backgroundColor: _backgroundColor,    );
    return Scaffold(
      appBar: appBar,      body: listView,    );  }
}