0

【Flutterの教科書】④ WebAPIと連携してフリー画像検索アプリを作ろう【前編】

こちらの教材で学んだことを元にじゃんけんゲームに画像を配置してみようと考えてみたものの、画像の配置がうまく行かず、サイトで調べた画像配置のコードを元に色々と試行錯誤をしてみたものの

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: JankenPage(),
      );
  }
}

class JankenPage extends StatefulWidget {
  const JankenPage({super.key});

  @override
  State<JankenPage> createState() => _JankenPageState();
}

class _JankenPageState extends State<JankenPage> {
  
  String computerHand = '✊';
  String myHand = '✊';
  String result = '引き分け';

  void selectHand(String selectedHand) {
    myHand = selectedHand;
    genarateComputerHand();
    judge();
    setState(() {});
  }

  void genarateComputerHand() {
    final randomNumber = Random().nextInt(3);
    computerHand = randomNumberToHand(randomNumber);
  }

  String randomNumberToHand(int randomNumber){
    switch (randomNumber) {
      case 0:
       return '✊';
      case 1:
        return '✌';
      case 2:
        return '🖐️';
      default:
        return '✊';
    }
  }

  void judge() {
    if (computerHand == myHand) {
      result = '引き分け';

    }else if (myHand == '✊' && computerHand == '✌'
    ||myHand == '✌' && computerHand == '✋'
    ||myHand == '✋' && computerHand == '✊'){
      result = 'あなたの勝ちずら';
    }else {
      result = '善子ちゃんの勝ちずら';
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('😈ヨハネちゃんとじゃんけん!',

        style: TextStyle(color: Colors.white),
        
        ),
        backgroundColor: Colors.blueGrey,

      ),

       
      body: Center(
        

        child: Column(

        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(
            Image.asset('images/Yohane.png'),
          ),
          Text(
            result,
            style: TextStyle(
              fontSize: 50,
            ),
            ),
            SizedBox(
              height: 64),
          Text(
            computerHand,
            style: TextStyle(
              fontSize: 50,
            ),
            ),
            SizedBox(
              height: 64),
            Text(
            myHand,
            style: TextStyle(
              fontSize: 50,
            ),
            ),
            SizedBox(
              height: 16),

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: (){
                  selectHand('✊');
                  // myHand = '✊';
                  // print('✊');
                  // setState(() {});
                },
                style: const ButtonStyle(
                  backgroundColor: ButtonBackgroundColor(Colors.red),
                ),
                child: Text('✊'),
                ),
                         ElevatedButton(
                onPressed: (){
                  selectHand('✌');
                  // myHand = '✌';
                  // print('✌️');
                  // setState(() {});
                },
                style: const ButtonStyle(
                  backgroundColor: ButtonBackgroundColor(Colors.blue),
                ),
                child: Text('✌️'),
                ),
                         ElevatedButton(
                onPressed: (){
                  selectHand('🖐️');
                  // myHand = '🖐️';
                  // print('🖐️');
                  // setState(() {});
                },
                style: const ButtonStyle(
                  backgroundColor: ButtonBackgroundColor(Colors.green)
                ),
                child: Text('🖐️'),
                ),
            ],
          ),
        ],
      ),
      ),
    );
  }
}
class ButtonBackgroundColor implements MaterialStateProperty<Color?> {
  const ButtonBackgroundColor(this.baseColor);

  final Color baseColor;

@override
  Color? resolve(Set<MaterialState> states) {
    Color? color = baseColor;

    if (states.contains(MaterialState.hovered)) {
      color = Color.lerp(color, Colors.black, 0.3);
    }
    if (states.contains(MaterialState.pressed)) {
      color = Color.lerp(color, Colors.black, 0.5);
    }
    return color;
  }
}

こちらのコードのうち、

  Image(
            Image.asset('images/Yohane.png'),
          ),

で、

: Error: Too many positional arguments: 0 allowed, but 1 found.
main.dart:94
Try removing the extra positional arguments.
          Image(
               ^
: Context: Found this candidate, but the arguments don't match.
image.dart:324
  const Image({

とエラーが出てしまって画像が表示できません。

画像の配置イメージとしてはenter image description hereこのようにしたいのですが、解決方法等わかる方いらっしゃいましたら教えてほしいです。お願いします。

child:Image.asset('images/Yohane.png')の前につけたが、このようにエラーが出てしまった。

Error (Xcode): lib/main.dart:17:9: Error: No named parameter with the name 'child',
Could not build the application for the simulator.
Error launching application on iPhone 14 Pro Max.

1 件の回答 1

0
        children: [
          Image(
            Image.asset('images/Yohane.png'),
          ),
          Text(

ではなく、

          children: [
            Image.asset('images/Yohane.png'),
            Text(

です。

Image.asset()はコンストラクタで、この呼び出しでImageウィジェットを作るので、それをImageでさらにラッピングする必要はありません。

参考
https://api.flutter.dev/flutter/widgets/Image/Image.asset.html

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。