Как изменить изображения с помощью пакета поставщика в Flutter

#image #flutter #state #provider #flutter-onpressed

#изображение #flutter #состояние #поставщик #flutter-onpressed

Вопрос:

Проблема: я нажимаю кнопку «сделать что-нибудь», и изображение, похоже, не может измениться с «привет» на «до свидания». Возвращающаяся ошибка

‘Ошибка: тип аргумента ‘Image’ не может быть присвоен типу параметра ‘String’.

  • «Изображение» взято из «package: flutter /src / widgets/image.dart» («.. / ../ Development / flutter / packages / flutter / lib / src / widgets/image.dart»). вернуть Image.asset(myValue);’

Можно ли преобразовать строку в изображение, чтобы она считывала изображение и отображала его на экране?

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Provider<MyModel>(//                              <--- Provider
      create: (context) => MyModel(),
      child: Consumer<MyModel>( //                           <--- MyModel Consumer
          builder: (context, myModel, child) {
            return ValueListenableProvider<Image>.value( // <--- ValueListenableProvider
              value: myModel.someValue,
              child: MaterialApp(
                home: Scaffold(
                  appBar: AppBar(title: Text('My App')),
                  body: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[

                      Flexible(
                        child: Container(
                            padding: const EdgeInsets.all(20),
                            color: Colors.green[200],
                            child: Consumer<MyModel>( //       <--- Consumer
                              builder: (context, myModel, child) {
                                return RaisedButton(
                                  child: Text('Do something'),
                                  onPressed: (){
                                    myModel.doSomething();
                                  },
                                );
                              },
                            )
                        ),
                      ),

                      Flexible(
                        child: Container(
                          padding: const EdgeInsets.all(35),
                          color: Colors.blue[200],
                          child: Consumer<Image>(//           <--- String Consumer
                            builder: (context, myValue, child) {
                              return Image.asset(myValue);
                            },
                          ),
                        ),
                      ),

                    ],
                  ),
                ),
              ),
            );
          }),
    );
  }
}

class MyModel { //                                             <--- MyModel
  ValueNotifier<Image> someValue = ValueNotifier(Image.asset('images/hello.png')); // <--- ValueNotifier
  void doSomething() {
    someValue.value = Image.asset('images/goodbye.png');
    print(someValue.value);
  }
}
  

Ответ №1:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Provider<MyModel>(
      //                              <--- Provider
      create: (context) => MyModel(),
      child:
          Consumer<MyModel>(//                           <--- MyModel Consumer
              builder: (context, myModel, child) {
        return ValueListenableProvider<Image>.value(
          // <--- ValueListenableProvider
          value: myModel.someValue,
          child: MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: Text('My App')),
              body: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Flexible(
                    child: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.green[200],
                        child: Consumer<MyModel>(
                          //       <--- Consumer
                          builder: (context, myModel, child) {
                            return RaisedButton(
                              child: Text('Do something'),
                              onPressed: () {
                                myModel.doSomething();
                              },
                            );
                          },
                        )),
                  ),
                  Flexible(
                    child: Container(
                      padding: const EdgeInsets.all(35),
                      color: Colors.blue[200],
                      child: Consumer<Image>(
                        //           <--- String Consumer
                        builder: (context, myValue, child) {
                          return myValue; //                         <--- **Change** 
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}

class MyModel {
  //                                             <--- MyModel
  ValueNotifier<Image> someValue =
      ValueNotifier(Image.asset('images/hello.png')); // <--- ValueNotifier
  void doSomething() { //                         <--- **Change** 
    if (someValue.value.toString() ==
        Image.asset('images/hello.png').toString()) {
      someValue.value = Image.asset('images/goodbye.png');
    } else if (someValue.value.toString() ==
        Image.asset('images/goodbye.png').toString()) {
      someValue.value = Image.asset('images/hello.png');
    }
  }
}
  

myValue уже является изображением, поэтому вам не нужно открывать его снова из Image.asset также добавленной функции для изменения изображения взад и вперед для вашей doSomething() функции