Basic Widgets

basic_widgets.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyScaffold(
        appBar: MyAppBar(
          title: Text(
            'Example title',
            style: Theme.of(context).primaryTextTheme.headline6,
          ),
        ),
        centeredContent: Text('Hello, world!'),
        bottomContent: _buttons());
  }

  Widget _buttons() {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
      FlatButton(
        color: Colors.blue,
        textColor: Colors.white,
        disabledColor: Colors.grey,
        disabledTextColor: Colors.black,
        padding: EdgeInsets.all(8.0),
        splashColor: Colors.blueAccent,
        onPressed: () {
          /*...*/
        },
        child: Text(
          "Flat Button",
          style: TextStyle(fontSize: 20.0),
        ),
      ),
      RaisedButton(
        onPressed: () {},
        textColor: Colors.white,
        // removes inner paddings between button border and child
        padding: EdgeInsets.all(0.0),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: <Color>[
                Colors.red[500],
                Colors.white,
                Color(0xFFF44336),
              ],
            ),
          ),
          padding: const EdgeInsets.all(10.0),
          child: const Text('Gradient Button', style: TextStyle(fontSize: 20)),
        ),
      ),
     
    ]);
  }
}

class MyScaffold extends StatelessWidget {
  final Widget appBar;
  final Widget centeredContent;
  final Widget bottomContent;

  MyScaffold(
      {@required this.appBar,
      @required this.centeredContent,
      @required this.bottomContent});

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: <Widget>[
          appBar,
          Expanded(
            child: Center(
              child: centeredContent,
            ),
          ),
          bottomContent,
          const SizedBox(height: 16)
        ],
      ),
    );
  }
}

class MyAppBar extends StatelessWidget {
  // Use @required when you want to specify that parameter
  // have to be passed by user.
  MyAppBar({@required this.title});

  // Fields in a Widget subclass are always marked "final".
  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: Row(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child to fill the available space.
          Expanded(
            child: title,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}