Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Flutter で Button の背景に画像を設定する


Flutter の Button コンポーネントに 背景画像を設定して、画像ボタンを作りたい。

Group 1.png

この画像を背景にした Button を作る。


(なんで じゃんけん なのかは ひみつ)


Background のようなオプションは見当たらなかったので、child に画像を設定することで実装する。


import 'package:flutter/material.dart';
import 'package:janken/gen/assets.gen.dart';

typedef void IncrementCallback();

class IncrementButton extends StatelessWidget {
  const IncrementButton(this._increment);

  final IncrementCallback _increment;

  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: this._increment,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      color: Colors.orange,
      child: Container(
        width: 180,
        height: 180,
        decoration: BoxDecoration(
          image: DecorationImage(
        // Assets.images.janken.trianglePng.path には 画像Path が入る
              image: AssetImage(Assets.images.janken.trianglePng.path), 
              fit: BoxFit.scaleDown),



Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away