【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.