Flutter - 使用 onPressed 更改图像（不在按钮中）

Question

i'm new in the game of StackOverflow and of flutter and try to write an app for web. Maybe it is a simple problem, but i don't know how to do it. I've the problem, that i don't know how to change a image, which i've displayed.

My target is 3 buttons, which can change an image above them. One of the images could be displayed or at the begin replaced with a placeholder, it's unimportant.

Maybe in the code are some unnecessary function, ignore them.

It would be very nice, if you could help me.

Image

import 'package:flutter/material.dart';

void main() {
  runApp(StarCounter());
}

class StarCounter extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Screen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _itemImage = Image.asset("Screenshot1.png");

  tmpFunction() {
    Container(
      child: _itemImage,
      width: 500,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Placeholder(
                fallbackWidth: 500,
              ),
            ),
            Text(
              'Wählen Sie den gewünschten Button aus:',
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlatButton(onPressed: tmpFunction, child: Text("Button 1")),
                FlatButton(onPressed: tmpFunction, child: Text("Button 2")),
                FlatButton(onPressed: tmpFunction, child: Text("Button 3")),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Each button will change image you can change user asset image or network image

import 'package:flutter/material.dart'; 
void main() {
runApp(StarCounter());
}

class StarCounter extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Screen',
  theme: ThemeData(
    primarySwatch: Colors.orange,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: MyHomePage(title: 'Screen'),
  );
  }
  }

   class MyHomePage extends StatefulWidget {
   MyHomePage({Key key, this.title}) : super(key: key);

   final String title;

    @override
   _MyHomePageState createState() => _MyHomePageState();
     }

    class _MyHomePageState extends State<MyHomePage> {
       var _itemImage = [
        Image.network("https://i.picsum.photos/id/203/200/300.jpg? 
        hmac=mJaqsySlyEjr8fLBHytyVCUyqlfPSxqXePXEIhZZi_Y"),
        Image.network("https://i.picsum.photos/id/14/200/200.jpg?hmac=bwQwH7- 
        0RPCqUVkFzd3hFhc6yDfC6_e7vgaKXZ7vFOA"),
        Image.network("https://picsum.photos/id/870/200/300?grayscale&blur=2")];

        int index =0;


        tmpFunction() {
        Container(
        child: _itemImage[index],
        width: 500,
        );
        }

       @override
       Widget build(BuildContext context) {
       return Scaffold(
        appBar: AppBar(
        title: Text(widget.title),
       ),
       body: Center(
       child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
       
         Container(
         child: _itemImage[index],
         width: 500,
         ),
        Text(
          'Wählen Sie den gewünschten Button aus:',
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(onPressed: (){
              
             
             setState(() { index = 0;});
            }, child: Text("Button 1")),
            FlatButton(onPressed: (){
               setState(() { index = 1;});
              
            }, child: Text("Button 2")),
            FlatButton(onPressed: (){
               setState(() {  index = 2;});
               
              
            }, child: Text("Button 3")),
          ],
           ),
          ],
         ),
           ),
        );
        }
       }