【超簡単】初心者向け Flutterでボタン操作による画像の切り替え ~関数の設定~

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // MyAppアプリを起動する。
}

// StatefulWidgetを使って、アプリの状態が変わる可能性があるウィジェットを作成する。
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key); // コンストラクタでキーを初期化。

  @override
  _MyAppState createState() => _MyAppState(); // 状態を管理するクラスを生成して返す。
}

// _MyAppStateクラスで、アプリの状態を管理する。
// MyAppウィジェットの状態を保持するクラスです。
class _MyAppState extends State<MyApp> {
  // 現在表示している画像のURLを保持する変数。
  String imageUrl = 'https://i.imgur.com/372zsV3.jpg';

  // 画像を変更する関数。
  void _changeImage() {
    // setStateを使って、ウィジェットの状態を更新する。
    setState(() {
      // 画像のURLを切り替える。条件演算子で現在のURLが特定のURLならもう一方のURLに、そうでなければ元のURLに戻す。
      imageUrl = imageUrl == 'https://i.imgur.com/372zsV3.jpg'
          ? 'https://i.imgur.com/TcaEu6j.jpg'
          : 'https://i.imgur.com/372zsV3.jpg';
    });
  }

  @override
  Widget build(BuildContext context) {
    // アプリのUIを構築する関数。
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Test App'), // アプリのタイトルを設定。
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.network(imageUrl), // 現在のimageUrlを使ってネットワークから画像を表示。
              ElevatedButton(
                onPressed: _changeImage, // ボタンが押された時に画像を変更する関数を呼び出す。
                child: const Text(
                  'Change', // ボタンのテキスト。
                  style: TextStyle(
                    fontSize: 20, // テキストのサイズ。
                    fontWeight: FontWeight.bold, // テキストを太字にする。
                    color: Colors.amberAccent, // テキストの色。
                  ),
                ),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.blue), // ボタンの背景色を青に設定。
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0), // ボタンの角を丸くする。
                      side: BorderSide(color: const Color.fromARGB(255, 241, 0, 0)), // ボタンの枠線の色を赤に設定。
                    ),
                  ),
                  padding: MaterialStateProperty.all(EdgeInsets.all(20)), // ボタンの内側の余白を設定。
                  elevation: MaterialStateProperty.all(5), // ボタンの影の高さを設定。
                ),
              ),
              const Text('First item'), // 単純なテキストウィジェット。
              const Text('Second item'), // 別のテキストウィジェット。
              const Text('Third item'), // さらに別のテキストウィジェット。
            ],
          ),
        ),
      ),
    );
  }
}

ElevatedButton(
  onPressed: () {
    // ボタンをタップしたときに実行されるコード
    print("ボタンがタップされました！");
  },
  child: Text('ボタンのラベル'),
)

ElevatedButton(
  onPressed: () {
    // ボタンをタップしたときのアクション
  },
  child: Text('カスタムボタン'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green, // ボタンの背景色
    onPrimary: Colors.white, // ボタンのテキスト色
    shape: RoundedRectangleBorder( // ボタンの形状を定義
      borderRadius: BorderRadius.circular(20), // 角の丸み
    ),
  ),
)

ElevatedButton(
  onPressed: () {
    // アクション
  },
  child: Text('詳細カスタム'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.purple), // 背景色
    elevation: MaterialStateProperty.all(8), // 影の高さ
    padding: MaterialStateProperty.all(EdgeInsets.all(16)), // パディング
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25), // 角の丸み
      ),
    ),
  ),
)

条件式 ? 値1 : 値2;

int userAge = 18;
String accessMessage = userAge >= 18 ? 'アクセス許可' : 'アクセス拒否';

imageUrl = imageUrl == 'https://i.imgur.com/372zsV3.jpg'
    ? 'https://i.imgur.com/TcaEu6j.jpg'
    : 'https://i.imgur.com/372zsV3.jpg';