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