如何返回ImagePicker替换Flutter中的现有图像

问题描述

问题：

我设置了一个背景图像，当用户单击单独屏幕上的小图像时，背景图像会发生变化，但是现在，我添加了一种功能，使用户可以从图库中单击自己的照片来替换背景图像。我已经设置了图像选择器，但是当我调用它时，它不会返回用户图像库并替换背景图像：

                                myModel.image = Image.file(_image);

这是带有背景图像的主屏幕，需要根据用户自己的图像进行更改：

import 'package:flutter/material.dart';
import 'package:flutter_app_background/small_images.dart';
import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';


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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MyModel>(
      create: (context) => MyModel(),child: MaterialApp(
        title: 'Title',home: HomePage(),),);
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        extendBodyBehindAppBar: true,appBar: AppBar(
          title: Text('Background Image',style: TextStyle(
              color: Colors.black,fontSize: 16,fontWeight: FontWeight.bold),iconTheme: IconThemeData(color: Colors.white),actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings,color: Colors.black,onPressed: () {
                Navigator.push(
                  context,MaterialPageRoute(builder: (context) => SmallImages()),);
              },],backgroundColor: Colors.transparent,elevation: 0.0,body: Stack(
          children: <Widget>
          [
            Positioned.fill(
              child: GestureDetector(
                child: Consumer<MyModel>(
                  builder: (context,myModel,child) {
                    return myModel.image ?? Image.asset('images/background_image.jpeg',fit: BoxFit.fill);
                    // return myValue;
                  },);
    }
}

class MyModel extends ChangeNotifier {
  Image _image;
  set image(Image value) {
    _image = value;
    notifyListeners();
  }
  Image get image => _image;

}

这是另一个带有“图像选取器”的屏幕。在“ own image.png”部分下，用户可以从图库中选择一个图像，并且它将返回背景图像，就像其他两个图像在调用时的工作方式一样myModel.image，然后是本地项目中的Image.Asset名称。

import 'package:flutter/material.dart';
import 'package:flutter_app_background/main.dart';
import 'package:provider/provider.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class SmallImages extends StatefulWidget {
  static int tappedGestureDetector = 1;

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

class _SmallImagesState extends State<SmallImages> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('');
      }
    });
  }

  List<bool> isSelected;

  void initState() {
    isSelected = [true,false,false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final myModel = Provider.of<MyModel>(context,listen:true); //default for listen is `true`
    return Scaffold(
    appBar: AppBar(
            title: Text('Small Image',style: TextStyle(
                color: Colors.black,actions: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_left,onPressed: () {
                  Navigator.pop(
                    context,MaterialPageRoute(builder: (context) => HomePage()),);
                },body: Material(
            child: GestureDetector(
              child: MaterialApp(
                  builder: (context,snapshot) {
                    return GridView.count(
                      crossAxisCount: 1,childAspectRatio: 1.0,padding: const EdgeInsets.all(4.0),mainAxisSpacing: 0.0,crossAxisSpacing: 0.0,children: [
                        GridView(
                          gridDelegate:
                          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: MediaQuery
                                .of(context)
                                .size
                                .width /
                                (MediaQuery
                                    .of(context)
                                    .size
                                    .height / 2),children: [
                                 Consumer<MyModel>(
                          builder: (context,child) {
                            return GestureDetector(
                              onTap: () {
                                // return myValue;
                                setState(() {
                                  SmallImages.tappedGestureDetector = 1;
                                });
                                myModel.image = Image.asset('images/affirmations_image.jpeg',fit: BoxFit.fill);
                              },child: Container(
                                height: 100,width: 107,decoration: BoxDecoration(border: SmallImages
                                    .tappedGestureDetector == 1
                                    ? Border.all(
                                    color: Color(0xff2244C7),width: 1.0)
                                    : Border
                                    .all(color: Colors.transparent,child: Image.asset(
                                  'images/sunset_image.png',);
                          },Consumer<MyModel>(
                              builder: (context,child) {
                                return GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      SmallImages.tappedGestureDetector = 2;
                                    }); // <-- replaced 'tapped' and 'other'
                                    myModel.image = Image.asset('images/iceland_background.jpg',fit: BoxFit.fill);
                                    },child: Container(
                                    height: 100,decoration: BoxDecoration(border: SmallImages
                                        .tappedGestureDetector == 2
                                        ? Border.all(
                                        color: Color(0xff2244C7),width: 1.0)
                                        : Border
                                        .all(color: Colors.transparent,child: Image.asset(
                                      'images/iceland_image.png',);
                              },child) {
                                return GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      SmallImages.tappedGestureDetector = 3;
                                    });
                                    myModel.image = Image.file(_image);
                                    getImage();
                                  },decoration: BoxDecoration(border: SmallImages
                                        .tappedGestureDetector == 3
                                        ? Border.all(
                                        color: Color(0xff2244C7),child: Image.asset(
                                      'images/own_image.png',].toList(),);
                  }),);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）