微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何返回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 举报,一经查实,本站将立刻删除。