[Flutter][Widget]画像を円形で表示する

5362 ワード
Flutter image widget 備忘録 image テキストリンク

画像を円形で表示させる

こんなふうに(右側)

コード

  • Container() から　BoxDecoration() を使って shape: BoxShape.circle を使う。
  • あとはimage にAssetImage()やNetworkImage()で画像を指定してあげる
circle.dart
Container(
  width: 110.0,
  height: 110.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      fit: BoxFit.fill,
      image: AssetImage("images/testdata1.jpg")
    )
  ),
),
  • サンプル画像を表示する Widgetコード
main.dart
var _data = <Widget> [
  SizedBox(
    width: MediaQuery.of(context).size.width,
    height: 120.0,
    child: RaisedButton(
      onPressed: () {},
      color: const Color(0xFFFCFF7F),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Image.asset(
            "images/testdata1.jpg",
            fit:BoxFit.fill,
            width: 110.0,
            height: 110.0,
        ),
          Container(
            width: 110.0,
            height: 110.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage("images/testdata1.jpg")
              )
            ),
          ),
        ]
      ),
    )
  ),
];