how to change an image when I click a toggle button(flutter)

6.5k Views Asked by At

enter image description here

I cannot embed image because I don't have 10 reputation. I want to load image when I click toggle buttons. it seems simple for you but it is hard for me to do it. I am a beginner . I don't know how to write onPressed button. I already wrote onPressed buttons for toggle button. it seems like it is not possible to write one more oppressed code. I already used the onpressedbutton code to use ToggleButton, but I need one more function to load image but I don't know how to do it

enter code here

import 'package:flutter/material.dart';
import '123.dart';
import '456.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('imageToggle'),),
        body: Column(
          children: [
            Expanded(child: Image.asset('images/meow.jpg')),
            Button123(
            ),
            Button456(),

          ],
        ),
      ),
    );
  }
}

class Button456 extends StatefulWidget {
  @override
  _Button456State createState() => _Button456State();
}

class _Button456State extends State<Button456> {
  List<bool> isSelected = List.generate(3, (index) => false);
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ToggleButtons(
          isSelected: isSelected,
          color: Colors.black,
          fillColor: Colors.grey,
          children: [
            Padding(padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('cat1'),),
            Padding(padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('cat2'),),
            Padding(padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('cat3'),),


          ],
          onPressed: (int newIndexx) {
            setState(() {
              for (int index = 0; index < isSelected.length; index++) {
                if (index == newIndexx) {
                  isSelected[index] = true;
                } else {
                  isSelected[index] = false;
                }
              }
            });
          },
        )
    );
  }
}
1

There are 1 best solutions below

2
On

You can make the image url a variable.

String imageLink = 'myImage.png';


class _MyAppState extends State<MyApp> {
    onButtonPressed(String value) {
       setState(() {imageLink = value});
    }

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
            appBar: AppBar(title: Text('imageToggle'),),
            body: Column(
                children: [
                   Expanded(child: Image.asset(imageLink)),
                   TextButton(child: Text('Click Me!'), onPressed: onButtonPressed('newImageLink')),
                ],
            ),
          ),
      );
   }
}