web-dev-qa-db-ja.com

Flutterで画像付きのボタンを作成しますか？

Flutterを使用して画像付きのボタンをどのように作成しますか？これは最も簡単なことのようですが、画像が親ウィジェットを完全には埋めません。これは私が持っているものです：

Container(child: ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: FlatButton(onPressed: null,
        child: Image.asset('path/the_image.png'))))

ガイダンスとして この投稿 に従いました。私の画像は次のようになります：

enter image description here

PNG画像の周囲のパディングに注意してください-これはコードにはありません。それはどこから来たのですか？ PNG自体にはキャンバスのパディングがないため、これは正しい手法ではありません。

必要なのは、FlatButton全体を埋める画像のボタン、または画像を歪めることなくアクションを追加できる別のウィジェットです。

imagebuttonwidgetflutter
13
Hahnemann

FlatButton内に画像を配置することは、（パディングなどの）いくつかのスタイル設定を自動的に処理するため、要件に適合しない可能性があります。

ボタンのアスペクトを完全に制御するには、カスタムウィジェット（画像を表示するためのカスタムContainerを使用した単純なBoxDecorationも含む）を作成し、それをジェスチャー認識機能でラップしてユーザーを処理することができます。相互作用（あなたの場合、単純なタップ）。最も単純な実装はGestureDetectorを使用しますが、タップ時にタップ可能なウィジェットの表面にマテリアルデザインの波紋をレンダリングするInkWellのような他のウィジェットもあります。

2
Dario Ielardi

次のように画像をgestureDetectorに配置します。

GestureDetector(
    onTap: () {}
    child: Image.asset('path/the_image.png')
)
1
user12227098
GestureDetector(
    onTap: () {print('click on edit');},
    child: Image(
        image: AssetImage('assets/images/icons/edit-button.png'),
        fit: BoxFit.cover,
        height: 20,
    )
),
1
Prakash Mandal

スタックを使用してこれを簡単に行うことができます

      Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 3.6,
            width: MediaQuery.of(context).size.width / 2.2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child:imageLoader1(img),
             /* Image.asset(
                "$img",
                fit: BoxFit.cover,
              ),*/
            ),
          ),

          Positioned(
            right: -10.0,
            bottom: 3.0,
            child: RawMaterialButton(
              onPressed: (){},
              fillColor: Colors.white,
              shape: CircleBorder(),
              elevation: 4.0,
              child: Padding(
                padding: EdgeInsets.all(5),
                child: Icon(
                  isFav
                      ?Icons.favorite
                      :Icons.favorite_border,
                  color: Colors.red,
                  size: 17,
                ),
              ),
            ),
          ),
        ],


      ),
0
waseem