Flutter Buttonのメモ

Table of Contents

Table of Contents

Flutter UIを勉強するため、色んなButtonを作成してメモしました。

sample


FlatButton

Flat

FlatButton(
  child: Text("Flat"),
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 1
    ),
    borderRadius: BorderRadius.circular(8.0)
  ),
  onPressed: () {},
)


RasiedButton

RasiedButton

RaisedButton(
  child: Text("Raised"),
  color: Colors.grey,
  textColor: Colors.white,
  onPressed: () {},
)


Elevation

elevation

RaisedButton(
  child: Text("Raised-elevation"),
  color: Colors.white,
  textColor: Colors.blue,
  elevation: 20,
  onPressed: () {},
)


BeveledRectangleBorder

BeveledRectangleBorder

RaisedButton(
  child: Text("Raised-Beveled"),
  color: Colors.yellow,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  onPressed: () {},
)


splash-highlight

splash-highlight

RaisedButton(
  child: Text("Raised-splash-highlight"),
  color: Colors.orange,
  textColor: Colors.white,
  splashColor: Colors.black,
  highlightColor: Colors.red,
  onPressed: () {},
)


Rounded

Rounded

RaisedButton(
  child: Text("Raise-Rounded"),
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  onPressed: () {},
)


Rounded-gradient

Rounded-gradient

RaisedButton(
  textColor: Colors.white,
  padding: EdgeInsets.all(0.0),
  child: Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30.0),
        gradient: LinearGradient(
            colors: <Color>[
              Colors.orange[300],
              Colors.orange[500],
              Colors.orange[700],
            ])
    ),
    padding: EdgeInsets.all(15.0),
    child: Text("Rounded-gradient"),
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(80.0),
  ),
  onPressed: () {},
)


Circle

circle

RaisedButton(
  child: Text("circle"),
  padding: EdgeInsets.all(20.0),
  color: Colors.blue,
  shape: CircleBorder(
    side: BorderSide(
      color: Colors.black
    )
  ),
  onPressed: () {},
)



IconButton

IconButton

IconButton(
  icon: Icon(Icons.edit),
  color: Colors.red,
  splashColor: Colors.red,
  onPressed: () {},
)


作成してみたButtonは以上です。