Zenn
📘

Flutter最近調べた事の雑なメモ

2021/10/06に公開
Flutter
tech

グラデーション

Container(
  width: double.infinity,
  height: 110,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: FractionalOffset.bottomCenter,
      end: FractionalOffset.topCenter,
      colors: [
        Colors.black.withOpacity(0.5),
        Colors.black.withOpacity(0.2),
        Colors.transparent
      ],
    ),
  ),
),

colorsでスタート〜最後までの色の変化を指定
stopsもあるけど使わなかった

Card内のイメージを角丸

カードのradiusに沿ってくれると思ったら無視して直角になってくれたので泣いた

ClipRRect(
  borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
  child: Image.network(imageUrl, height: 220, width: double.infinity, fit: BoxFit.fitWidth,),
),

ClipRRectの下にImageを置けばOK

AppBarに戻るボタン

appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.black),
    onPressed: () => Navigator.of(context).pop(),
  ),
)

AppBarにアイコン

appBar: AppBar(
  actions: [
    IconButton(
        icon: Icon(Icons.settings, color: Colors.grey,),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) {
            return SettingPage();
          }),
        )
    ),
  ],
)

Discussion