[buttons] #flutter #dartpad https://dartpad.dev/cc15601dcc93c87ffbb38e096d54d7a8 universe buttons https://dartpad.dev/e560e1c2e4455ad53aac245079ccdcf2

main.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Buttons examples'),
        ),
        body: Center(
          child: Column(children: <Widget>[
            SizedBox(height: 20),
            RaisedButton.icon(
              elevation: 4.0,
              shape: StadiumBorder(),
              icon: Icon(Icons.history),
              color: Colors.lightBlue,
              textColor: Colors.black,
              onPressed: () {},
              label: Text(
                "RaisedButton.icon",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: FlatButton(
                padding: EdgeInsets.all(10.0),
                color: Colors.lightBlue,
                textColor: Colors.black,
                onPressed: () {},
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 10.0),
                    Icon(Icons.sentiment_neutral),
                    SizedBox(width: 12.0),
                    Text(
                      "FlatButton",
                      style: TextStyle(
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: FlatButton(
                padding: EdgeInsets.all(10.0),
                color: Colors.lightBlue,
                textColor: Colors.black,
                shape: StadiumBorder(),
                onPressed: () {},
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 10.0),
                    Icon(Icons.save),
                    SizedBox(width: 12.0),
                    Text(
                      "FlatButton StadiumBorder",
                      style: TextStyle(
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 10),
            Text("SizedBox.fromSize"),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox.fromSize(
                size: Size(56, 56), // button width and height
                child: ClipOval(
                  child: Material(
                    color: Colors.orange, // button color
                    child: InkWell(
                      splashColor: Colors.green, // splash color
                      onTap: () {}, // button pressed
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.call), // icon
                          Text("call"), // text
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
            Center(
              child: ButtonTheme(
                minWidth: 150.0,
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.deepPurpleAccent,
                  textColor: Colors.white,
                  padding: EdgeInsets.all(14.0),
                  child: Text(
                    'FlatButton with shape',
                    style: TextStyle(fontSize: 18.0),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30.0)),
                ),
              ),
            ),
            SizedBox(height: 10),
            Center(
              child: ButtonTheme(
                minWidth: 150.0,
                child: FlatButton(
                  onPressed: () {},
                  textColor: Colors.white,
                  padding: EdgeInsets.all(14.0),
                  child: Text(
                    'FlatButton with border side',
                    style: TextStyle(fontSize: 18.0, color: Colors.black),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                    side: BorderSide(color: Colors.red, width: 2),
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
            RaisedButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
              elevation: 4,
              onPressed: () {},
              child: Text("Raised Button with shape"),
            ),
            SizedBox(height: 10),
            Container(
              width: 130.0,
              height: 43.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.0),
                gradient: LinearGradient(
                  // Where the linear gradient begins and ends
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  // Add one stop for each color. Stops should increase from 0 to 1
                  stops: [0.1, 0.9],
                  colors: [
                    // Colors are easy thanks to Flutter's Colors class.
                    Color(0xff1d83ab),
                    Color(0xff0cbab8),
                  ],
                ),
              ),
              child: FlatButton(
                child: Text(
                  'Sign In',
                  style: TextStyle(
                    fontSize: 16.0,
                    fontFamily: 'Righteous',
                    fontWeight: FontWeight.w600,
                  ),
                ),
                textColor: Colors.white,
                color: Colors.transparent,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                onPressed: () {},
              ),
            ),
            SizedBox(height: 10),
            Center(
              child: SizedBox.fromSize(
                size: Size(80, 80), // button width and height
                child: ClipOval(
                  child: Material(
                    color: Colors.pink[300], // button color
                    child: InkWell(
                      splashColor: Colors.yellow, // splash color
                      onTap: () {}, // button pressed
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.linked_camera), // icon
                          Text("Picture"), // text
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
            InkWell(
              splashColor: Colors.yellow,
              onLongPress: () {
                AlertDialog(
                  title: Text('Not in stock'),
                  content: const Text('This item is no longer available'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('Ok'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                );
              },
              child: Container(
                //width: 100.0,
                height: 50.0,
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  border: Border.all(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Center(
                  child: Text(
                    'Long Press Me',
                    style: TextStyle(fontSize: 18.0, color: Colors.white),
                  ),
                ),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}