

[【Flutterの教科書】④
WebAPIと連携してフリー画像検索アプリを作ろう【前編】](https://www.youtube.com/watch?v=vdYrRkgk20E)

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

[code]

    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;
      }
    }
    
[/code]

こちらのコードのうち、

[code]

      Image(
                Image.asset('images/Yohane.png'),
              ),
    
[/code]

で、

[code]

    : 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({
    
[/code]

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

画像の配置イメージとしては[enter image description
here](https://i.stack.imgur.com/NfKzu.png)このようにしたいのですが、解決方法等わかる方いらっしゃいましたら教えてほしいです。お願いします。

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

[code]

    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.
    
[/code]


CC BY-SA 4.0
2023-05-09T02:28:22.410
94786
2023-05-10T01:13:00.710
2023-05-09T02:52:17.107
3060
54140
question
flutter
Flutterでうまく画像を配置することができない

[code]

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

ではなく、

[code]

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

です。

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

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


CC BY-SA 4.0
2023-05-10T01:13:00.710
94795
2023-05-10T01:13:00.710
54446
94786
answer