在裁剪图像并将其存储在一页上的 RXString 中后,我正在使用 GetX 获取 Image 的路径:
RxString imageAdd = '$imagePath'.obs;
然后我使用以下方法在另一个页面上检索图像的路径:
Obx( () => Image( image: AssetImage( (pollImageController.imageAdd.value)),
但是图像没有显示在第二页上。完整代码:
ImagePickerCropper Page: import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:justpoll/Constants.dart'; import 'package:image_cropper/image_cropper.dart'; import 'package:image_picker/image_picker.dart'; import 'dart:io'; import 'package:justpoll/screens/create_poll/create_poll4.dart'; String imagePath; class CreatePoll3 extends StatefulWidget { @override _CreatePoll3State createState() => _CreatePoll3State(); } class _CreatePoll3State extends State<CreatePoll3> { final controller = Get.put(PollImageController()); File _selectedFile; bool _inProcess = false; final _picker = ImagePicker(); Widget getImageWidget() { if (_selectedFile != null) { return Image.file( _selectedFile, width: 370, height: 230, fit: BoxFit.cover, ); } else { return Padding( padding: const EdgeInsets.only(bottom: 20), child: Image.asset( "assets/Images/placeholder.png", width: 370, height: 230, fit: BoxFit.cover, ), ); } } getImage(ImageSource source) async { this.setState(() { _inProcess = true; }); PickedFile image = await _picker.getImage(source: source); if (image != null) { File cropped = await ImageCropper.cropImage( sourcePath: image.path, aspectRatio: CropAspectRatio(ratioX: 2, ratioY: 1.5), compressQuality: 100, maxWidth: 700, maxHeight: 700, compressFormat: ImageCompressFormat.jpg, androidUiSettings: AndroidUiSettings( toolbarColor: Colors.white, toolbarTitle: "Crop Image", statusBarColor: Colors.black, backgroundColor: Colors.white, )); imagePath = cropped.path; print(imagePath); this.setState(() { _selectedFile = cropped; _inProcess = false; }); } else { this.setState(() { _inProcess = false; }); } } @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: MyColors.white, appBar: AppBar( title: Padding( padding: const EdgeInsets.all(75.0), child: Text('New Poll'), ), leading: GestureDetector( onTap: () { Navigator.pop(context); }, child: Icon( Icons.arrow_back, ), ), backgroundColor: Colors.black87, ), body: ListView( children: [ Column( children: [ Center( child: Padding( padding: const EdgeInsets.only(top: 18, bottom: 28), child: Text("3/4"), ), ), // Padding( // padding: const EdgeInsets.only(right: 230.0, top: 30, bottom: 30), // child: Text( // "Add Image", // style: TextType.regularDarkText, // ), // ), getImageWidget(), Padding( padding: const EdgeInsets.only(top: 20), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ MaterialButton( onPressed: () { getImage(ImageSource.camera); }, color: Colors.black, textColor: Colors.white, child: Icon( Icons.camera, size: 24, ), padding: EdgeInsets.all(16), shape: CircleBorder(), ), MaterialButton( onPressed: () { getImage(ImageSource.gallery); }, color: Colors.black, textColor: Colors.white, child: Icon( Icons.photo_album, size: 24, ), padding: EdgeInsets.all(16), shape: CircleBorder(), ), Align( alignment: Alignment.bottomRight, child: MaterialButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => CreatePoll4(), ), ); }, color: Colors.black, textColor: Colors.white, child: Icon( Icons.arrow_forward, size: 24, ), padding: EdgeInsets.all(16), shape: CircleBorder(), ), ) ], ), ), (_inProcess) ? Container( color: Colors.white, height: MediaQuery.of(context).size.height * 0.95, child: Center( child: CircularProgressIndicator(), ), ) : Center() ], ), ], ), ), ); } } class PollImageController extends GetxController { RxString imageAdd = '$imagePath'.obs; // adding .obs makes this a stream based observable String // this onInit override can be used instead of initState in a stateful widget. // All text editing controllers can be initialized here @override void onInit() { super.onInit(); } @override void onClose() { super.onClose(); } }
图像显示页面:
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:justpoll/Constants.dart'; import 'package:justpoll/screens/home_page/nav.dart'; import 'create_poll1_static.dart'; import 'create_poll3.dart'; final pollDataController = Get.find<PollDataController>(); final pollImageController = Get.find<PollImageController>(); // final _questionController = pollDataController.questionController; class CreatePoll4 extends StatefulWidget { @override _CreatePoll4State createState() => _CreatePoll4State(); } class _CreatePoll4State extends State<CreatePoll4> { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: MyColors.white, appBar: AppBar( title: Padding( padding: const EdgeInsets.all(75.0), child: Text('Poll Preview'), ), leading: GestureDetector( onTap: () { Navigator.pop(context); }, child: Icon( Icons.arrow_back, ), ), backgroundColor: Colors.black87, ), body: ListView( children: [ Column( children: [ Center( child: Padding( padding: const EdgeInsets.only(top: 18, bottom: 28), child: Text("4/4"), ), ), Padding( padding: const EdgeInsets.only(right: 240, top: 10), child: Text( 'Select Theme', style: TextType.regularDarkText, ), ), Padding( padding: const EdgeInsets.only(top: 10), child: Row( children: [ Expanded( child: MaterialButton( onPressed: () {}, color: Colors.yellow, textColor: Colors.white, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.orange, textColor: Colors.white, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.brown, textColor: Colors.white, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.blue, textColor: Colors.white, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.green, textColor: Colors.white, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.black, textColor: Colors.white, shape: CircleBorder(), ), ), ], ), ), Card( child: Container( color: Colors.blue, child: Padding( padding: const EdgeInsets.only(bottom: 10), child: Column( children: [ Row( children: [ Padding( padding: const EdgeInsets.all(8.0), child: CircleAvatar( backgroundImage: AssetImage('assets/Images/blackLogo.png'), ), ), Padding( padding: const EdgeInsets.only(left: 10), child: Text('JustPoll'), ), ], ), Padding( padding: const EdgeInsets.all(8.0), child: Obx( () => Text(pollDataController.question.value), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Obx( () => Image( image: AssetImage( (pollImageController.imageAdd.value)), height: 150, width: 200, ), ), ), Row( children: [ Padding( padding: const EdgeInsets.only(left: 120, top: 20), child: Obx( () => Text(pollDataController.op1.value), ), ), SizedBox( width: 70, ), Padding( padding: const EdgeInsets.only(left: 10, top: 20), child: Obx( () => Text(pollDataController.op1Emoji.value), ), ), ], ), Row( children: [ Padding( padding: const EdgeInsets.only(left: 120, top: 20), child: Obx( () => Text(pollDataController.op2.value), ), ), SizedBox( width: 70, ), Padding( padding: const EdgeInsets.only(left: 10, top: 20), child: Obx( () => Text(pollDataController.op2Emoji.value), ), ), ], ), Row( children: [ Padding( padding: const EdgeInsets.only(left: 120, top: 20), child: Obx( () => Text(pollDataController.op3.value), ), ), SizedBox( width: 70, ), Padding( padding: const EdgeInsets.only(left: 10, top: 20), child: Obx( () => Text(pollDataController.op3Emoji.value), ), ), ], ), Row( children: [ Padding( padding: const EdgeInsets.only(left: 120, top: 20), child: Obx( () => Text(pollDataController.op4.value), ), ), SizedBox( width: 70, ), Padding( padding: const EdgeInsets.only(left: 10, top: 20), child: Obx( () => Text(pollDataController.op4Emoji.value), ), ), ], ), ], ), ), ), ), Padding( padding: const EdgeInsets.only(top: 10), child: Align( alignment: Alignment.bottomRight, child: MaterialButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => Nav(), ), ); }, color: Colors.black, textColor: Colors.white, child: Icon( Icons.done, size: 24, ), padding: EdgeInsets.all(16), shape: CircleBorder(), ), ), ) ], ), ], ), ), ); } }