꿈꾸는 시스템 디자이너

Flutter Example - Buttons | FlatButton / OutlineButton / RaisedButton / IconButton / FloatingActionButton 본문

Tutorial/Flutter with App

Flutter Example - Buttons | FlatButton / OutlineButton / RaisedButton / IconButton / FloatingActionButton

독행소년 2019. 9. 30. 14:09
import 'package:flutter/material.dart';

class ButtonWidget extends StatelessWidget {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(title: Text("Button Widget Demo")),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: ListView(
          children: <Widget>[
            Center(
              child: FlatButton(
                child: Text("FlatButton"),
                onPressed: () {
                  showSnackBar("FlatButton");
                },
              ),
            ),
            Center(
              child: FlatButton(
                color: Colors.blue,
                textColor: Colors.white,
                disabledColor: Colors.grey,
                disabledTextColor: Colors.black,
                padding: EdgeInsets.all(8.0),
                splashColor: Colors.blueAccent,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                child: Text("FlatButton with Color & Shape"),
                onPressed: () {
                  showSnackBar("FlatButton with Color & Shape");
                },
              ),
            ),
            Center(
              child: OutlineButton(
                color: Colors.orange,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                child: Text("OutlineButton with Shape"),
                onPressed: () {
                  showSnackBar("OutlineButton with Shape");
                },
              ),
            ),
            Center(
              child: RaisedButton(
                child: Text("RaisedButton"),
                onPressed: () {
                  showSnackBar("RaisedButton");
                },
              ),
            ),
            Center(
              child: RaisedButton(
                color: Colors.orange,
                textColor: Colors.white,
                child: Text("RaisedButton with Color"),
                onPressed: () {
                  showSnackBar("RaisedButton with Color");
                },
              ),
            ),
            Center(
              child: IconButton(
                color: Colors.redAccent,
                icon: Icon(Icons.directions_bus),
                onPressed: () {
                  showSnackBar("IconButton");
                },
              ),
            ),
            Center(
              child: Container(
                padding: const EdgeInsets.all(0),
                height: 40,
                width: 40,
                child: FloatingActionButton(
                  child: Icon(Icons.add),
                  onPressed: () {
                    showSnackBar("FloatingActionButton");
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  showSnackBar(String message) {
    scaffoldKey.currentState
      ..hideCurrentSnackBar()
      ..showSnackBar(
        SnackBar(
          content: Text(message),
          backgroundColor: Colors.blue,
          action: SnackBarAction(
            label: "Done",
            textColor: Colors.white,
            onPressed: () {},
          ),
        ),
      );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동


※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

 

Flutter Code Examples - Google Play 앱

Are you a beginner at Flutter? Check out the various features of Flutter through the demo. Source code for all demos is also provided.

play.google.com

Comments