Effect picture:

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Button demo page'),

        actions: <Widget>[
          IconButton(           // Icon button
            icon: Icon(Icons.settings),
            onPressed: (){

            },
          )
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,    // center vertically
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,  // center horizontally
            children: <Widget>[
              RaisedButton(
                child: Text('Normal button'),
                onPressed: (){
                  print('Normal button');
                },
              ),
              SizedBox(width: 10,),
              RaisedButton(
                child: Text('Color button'),
                color: Colors.blue, //background color
                textColor: Colors.white,  // font white
                onPressed: (){
                  print('Color button');
                },
              ),
              SizedBox(width: 10,),
              RaisedButton(
                child: Text('Shadow button'),
                color: Colors.blue, //background color
                textColor: Colors.white,  // font white
                elevation: 10,  // Set the shadow effect, the larger the value, the better the shadow effect
                onPressed: (){
                  print('Shadow button');
                },
              ),
            ],
          ),
          RaisedButton.icon(
//              onPressed: null,
              icon: Icon(Icons.search),
              label: Text('Icon button'),
            color: Colors.blue,
              textColor: Colors.white,
            onPressed: (){
                print('Icon button');
            },
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(      // Use the container to set the width and height of the button
                height: 50,
                width: 300,
                child: RaisedButton(
                  child: Text('Width Height'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: (){
                    print('Width Height');
                  },
                ),
              )
            ],
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             Expanded(            // Full screen width
               child: Container(    // Use the container to set the height
                 height: 80,
                 margin: EdgeInsets.all(10),    // Set: left and right spacing 10
                 child:  RaisedButton(
                   child: Text('Adaptive button'),
                   color: Colors.blue,
                   textColor: Colors.white,
                   elevation: 20,
                   onPressed: (){
                     print('Adaptive button');
                   },
                 ),
               )
             )
            ],
          ),
          SizedBox(height: 10,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Round corner button'),
                color: Colors.blue,
                textColor: Colors.white,
                elevation: 20,
                shape: RoundedRectangleBorder(      // Round corner button
                  borderRadius: BorderRadius.circular(10)     // Round angle radian
                ),
                onPressed: (){
                  print('Round corner button');
                }),
              SizedBox(width: 10,),
             Container(
               height: 80,  // Set: height, can also be understood as diameter
               child:  RaisedButton(
                   child: Text('Round button'),
                   color: Colors.blue,
                   textColor: Colors.white,
                   elevation: 20,
                   splashColor: Colors.red,  // When setting the button for a long time, the water ripple color
                   shape: CircleBorder(      // Round corner button
                       side: BorderSide(
                           color: Colors.white
                       )
                   ),
                   onPressed: (){
                     print('Round button');
                   }),
             ),
              FlatButton(               // Flat button, there is no shadow by default, and there is no background color by default
                child: Text('Flat button'),
                color: Colors.blue,
                textColor: Colors.yellow,
                onPressed: (){
                  print('Flat button');
                },
              )
            ],
          ),
          SizedBox(height: 10,),
          OutlineButton(        // Button with border
            child: Text('Border button'),
// color: Colors.red, no effect, this is the characteristic of the border button, not only comes with a border, but also cannot set its background color, I guess it may be that the author is afraid that the background color set is the same as the border color
// textColor: Colors.yellow, // has an effect
            onPressed: (){
              print('Border button');
            },
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(                   // Adaptive horizontal tiling
                child: Container(
                  margin: EdgeInsets.all(20),   // The distance between top, bottom, left and right is 20
                  height: 50,
                  child: OutlineButton(
                    child: Text('registered'),
                    onPressed: (){

                    },
                  ),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    child: Text('log in'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print('log in');
                    },
                  ),
                  RaisedButton(
                    child: Text('registered'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print('registered');
                    },
                  ),
                  MyButton(text:'Custom Button',height: 60.0,width: 100,pressed: (){
                    print('Custom Button');
                  })
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

// Custom button component

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;
  const MyButton({this.text="",this.pressed=null,this.width=80.0,this.height=30.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}