xt / Flutter-ReserveApp · Commits

Go to a project

Commit 51f55f908e97f4080a35b069c968011f030f9d00

Authored by wdn127929
1 parent 357ee93d
build: skipped

相册、相机选择图片

Inline Side-by-side
Showing 5 changed files with 392 additions and 33 deletions
... ... @@ -2,15 +2,23 @@ import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:one_key/pages/online_check/photo_view_wiget.dart';
import 'package:one_key/provider/online_check_edit_provider.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/utils.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/v_empty_view.dart';
import 'package:provider/provider.dart';
import 'package:image_picker/image_picker.dart';
import 'package:video_player/video_player.dart';
final int MAX_IMAGE_NUMBER = 9;
typedef void OnPickImageCallback(
double maxWidth, double maxHeight, int quality);
class ImgPickerWidget extends StatelessWidget {
class ImgPickerWidget extends StatefulWidget {
final ScrollController scrollController;
final Color borderColor;
final ValueChanged onChange;
... ... @@ -21,46 +29,121 @@ class ImgPickerWidget extends StatelessWidget {
this.onChange})
: super(key: key);
@override
_ImgPickerWidgetState createState() => _ImgPickerWidgetState();
}
class _ImgPickerWidgetState extends State<ImgPickerWidget> {
File _image;
final picker = ImagePicker();
OnlineCheckEditProvider _onlineCheckEditProvider;
//相册 相机
Future _getFromPictureOrCamera(context, imageSource) async {
// File image = await ImagePicker.pickImage(
// source: imageSource,
// );
// if (image != null) {
// _provider.imageList.add(image);
// _provider.notifyListeners();
// }
// _provider.uploadTravelReleaseImg(image);
// Future _getFromPictureOrCamera(context, imageSource) async {
// File image = await picker.getImage(
// source: imageSource,
// );
// if (image != null) {
// _provider.imageList.add(image);
// _provider.notifyListeners();
// }
// // _provider.uploadTravelReleaseImg(image);
// }
Future _getFromPictureOrCamera(imageSource) async {
final pickedFile = await picker.getImage(source: imageSource);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
_onlineCheckEditProvider.imageList.add(_image);
_onlineCheckEditProvider.notifyListeners();
} else {
print('No image selected.');
}
});
}
@override
void dispose() {
super.dispose();
}
Future _openModalBottomSheet(context) async {
final option = await showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return Container(
height: 200.0,
// height: ScreenUtil().setWidth(180 * 2),
decoration: BoxDecoration(
color: MyColours.color_ffffff,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setWidth(24)),
topRight: Radius.circular(ScreenUtil().setWidth(24)))),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text('拍照', textAlign: TextAlign.center),
InkWell(
onTap: () {
_getFromPictureOrCamera(context, ImageSource.camera);
_getFromPictureOrCamera(ImageSource.camera);
Navigator.pop(context);
},
child: Padding(
padding: EdgeInsets.symmetric(
vertical: ScreenUtil().setWidth(18 * 2)),
child: Text(
'拍摄',
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
color: MyColours.color_353535,
fontWeight: FontWeight.bold),
),
),
),
MyDivider(
double.infinity,
ScreenUtil().setWidth(2),
color: MyColours.color_EEEEEE,
),
ListTile(
title: Text('从相册选择', textAlign: TextAlign.center),
InkWell(
onTap: () {
_getFromPictureOrCamera(context, ImageSource.gallery);
_getFromPictureOrCamera(ImageSource.gallery);
Navigator.pop(context);
},
child: Padding(
padding: EdgeInsets.symmetric(
vertical: ScreenUtil().setWidth(18 * 2)),
child: Text(
'从相册选择',
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
color: MyColours.color_353535,
fontWeight: FontWeight.bold),
),
),
),
ListTile(
title: Text('取消', textAlign: TextAlign.center),
MyDivider(
double.infinity,
ScreenUtil().setWidth(10),
color: MyColours.color_EEEEEE,
),
InkWell(
onTap: () {
Navigator.pop(context, '取消');
},
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: ScreenUtil().setWidth(18 * 2)),
child: Text(
'取消',
style: TextStyle(
fontSize: ScreenUtil().setSp(32),
color: MyColours.color_353535,
fontWeight: FontWeight.bold),
),
),
)
],
),
);
... ... @@ -71,7 +154,7 @@ class ImgPickerWidget extends StatelessWidget {
OnlineCheckEditProvider _provider =
Provider.of<OnlineCheckEditProvider>(context, listen: false);
return GridView.builder(
controller: scrollController,
controller: widget.scrollController,
// padding: EdgeInsets.only(top: ScreenUtil().getAdapterSize(10)),
shrinkWrap: true,
itemCount: count,
... ... @@ -100,16 +183,24 @@ class ImgPickerWidget extends StatelessWidget {
width: ScreenUtil().setWidth(90 * 2),
height: ScreenUtil().setWidth(90 * 2),
decoration: BoxDecoration(
border: Border.all(
color: MyColours.color_E0E0E0,
width: ScreenUtil().setWidth(2)),
color: Theme.of(context).backgroundColor),
border: Border.all(
color: MyColours.color_E0E0E0,
width: ScreenUtil().setWidth(2)),
),
child: Column(
children: [
VEmptyView(74),
Image.asset(
Utils.getImgPath('add_image'),
width: ScreenUtil().setWidth(32),
height: ScreenUtil().setWidth(32),
),
VEmptyView(10),
Text(
'添加照片',
style: TextStyle(
fontSize: ScreenUtil().setSp(24),
color: MyColours.color_999999),
)
],
)),
... ... @@ -117,13 +208,51 @@ class ImgPickerWidget extends StatelessWidget {
}
return _provider.imageList.length < 1
? Text('')
: Image.file(_provider.imageList[index], fit: BoxFit.cover);
: InkWell(
onTap: () {
_showPhotoView(context, index, _provider.imageList[index]);
},
child:
Image.file(_provider.imageList[index], fit: BoxFit.cover),
);
});
}
//查看大图
_showPhotoView(BuildContext context, int index, List imgs,
{isShow = false, List dashName}) async {
// if (imgs.length == 1 &&
// imgs[0] ==
// 'http://nosqn.colorcun.com/custom/lite-online/image/def-banner.png') {
// imgs[0] = 'http://nosqn.colorcun.com/app/seller-hj-empty.png';
// }
Utils.setBarStatus(false, color: Colors.black);
dynamic result = await showGeneralDialog(
context: context,
barrierDismissible: false,
// barrierColor: Colors.red,
barrierLabel:
MaterialLocalizations.of(context).modalBarrierDismissLabel,
transitionDuration: const Duration(milliseconds: 150),
pageBuilder: (BuildContext context, Animation animation,
Animation secondaryAnimation) {
Widget child = Stack(
children: <Widget>[
PhotoPreview(
initialIndex: index,
photoList: imgs,
isShow: isShow,
dashName: dashName)
],
);
return child;
});
Utils.setBarStatus(true, color: Colors.white);
}
@override
Widget build(BuildContext context) {
OnlineCheckEditProvider _provider =
_onlineCheckEditProvider =
Provider.of<OnlineCheckEditProvider>(context, listen: true);
return Container(
width: double.infinity,
... ... @@ -158,11 +287,13 @@ class ImgPickerWidget extends StatelessWidget {
Padding(
padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
child: _getGridImg(
_provider.imageList.length < MAX_IMAGE_NUMBER
? _provider.imageList.length + 1
: _provider.imageList.length,
_onlineCheckEditProvider.imageList.length < MAX_IMAGE_NUMBER
? _onlineCheckEditProvider.imageList.length + 1
: _onlineCheckEditProvider.imageList.length,
context,
_provider.imageList.length == MAX_IMAGE_NUMBER ? true : false),
_onlineCheckEditProvider.imageList.length == MAX_IMAGE_NUMBER
? true
: false),
)
// _getGridImg(1, context)
],
... ...
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:one_key/res/colors.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
//PhotoPreview 点击小图后的效果
class PhotoPreview extends StatefulWidget {
final int initialIndex;
final List<String> photoList;
final PageController pageController;
final bool isShow;
final List dashName;
PhotoPreview({this.initialIndex, this.photoList, this.isShow, this.dashName})
: pageController = PageController(initialPage: initialIndex);
@override
_PhotoPreviewState createState() => _PhotoPreviewState();
}
class _PhotoPreviewState extends State<PhotoPreview> {
int currentIndex;
final _controller = new PageController();
static const _kDuration = const Duration(milliseconds: 300);
static const _kCurve = Curves.ease;
final _kArrowColor = Colors.black.withOpacity(0.8);
List tempImgList = [];
@override
void initState() {
currentIndex = widget.initialIndex;
for (var item in widget.photoList) {
tempImgList.add('$item-zdmask');
}
print(tempImgList);
// tempImgList = widget.photoList;
super.initState();
}
//图片切换
void onPageChanged(int index) {
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Material(
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
decoration: BoxDecoration(
color: Colors.black,
),
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
),
child: Stack(
children: <Widget>[
Container(
// width: ScreenUtil().setWidth(375 * 2),
// height: ScreenUtil().setHeight(397 * 2),
// margin: EdgeInsets.only(
// top: ScreenUtil().setWidth(260),
// bottom: ScreenUtil().setWidth(280)),
child: PhotoViewGallery.builder(
scrollPhysics: const BouncingScrollPhysics(),
onPageChanged: onPageChanged,
itemCount: tempImgList.length,
reverse: false,
loadingBuilder: (context, event) {
return UnconstrainedBox(
child: SizedBox(
width: ScreenUtil().setWidth(80),
height: ScreenUtil().setWidth(80),
child: CircularProgressIndicator(),
),
);
},
pageController: widget.pageController,
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(tempImgList[index]),
minScale: PhotoViewComputedScale.contained * 0.6,
maxScale: PhotoViewComputedScale.covered * 1.1,
initialScale: PhotoViewComputedScale.contained,
);
},
),
),
Positioned(
top: ScreenUtil().setWidth(70),
left: ScreenUtil().setWidth(40),
child: Icon(Icons.close, color: Colors.white)),
],
)),
));
}
}
/// An indicator showing the currently selected page of a PageController
class DotsIndicator extends AnimatedWidget {
DotsIndicator({
this.controller,
this.itemCount,
this.onPageSelected,
this.color: Colors.white,
}) : super(listenable: controller);
/// The PageController that this DotsIndicator is representing.
final PageController controller;
/// The number of items managed by the PageController
final int itemCount;
/// Called when a dot is tapped
final ValueChanged<int> onPageSelected;
/// The color of the dots.
///
/// Defaults to `Colors.white`.
final Color color;
// The base size of the dots
static const double _kDotSize = 4.0;
// The increase in the size of the selected dot
static const double _kMaxZoom = 2.0;
// The distance between the center of each dot
static const double _kDotSpacing = 18.0;
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
),
);
double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
return new Container(
width: _kDotSpacing,
child: new Center(
child: new Material(
color: color,
type: MaterialType.circle,
child: new Container(
width: _kDotSize * zoom,
height: _kDotSize * zoom,
child: new InkWell(
onTap: () => onPageSelected(index),
),
),
),
),
);
}
Widget build(BuildContext context) {
return new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: new List<Widget>.generate(itemCount, _buildDot),
);
}
}
... ...
... ... @@ -22,6 +22,25 @@ import '../app.dart';
typedef BookTimeSetCallback = void Function(bool needChange);
class Utils {
static setBarStatus(bool isDarkIcon,
{Color color: Colors.transparent}) async {
if (Platform.isAndroid) {
if (isDarkIcon) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: color,
statusBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.dark);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
} else {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: color,
statusBarIconBrightness: Brightness.light,
statusBarBrightness: Brightness.light);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
}
static void showToast(String msg) {
Fluttertoast.showToast(
msg: msg, toastLength: Toast.LENGTH_LONG, gravity: ToastGravity.CENTER);
... ...
... ... @@ -667,6 +667,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.0.4"
photo_view:
dependency: "direct main"
description:
name: photo_view
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.9.2"
platform:
dependency: transitive
description:
... ... @@ -975,6 +982,27 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.8"
video_player:
dependency: "direct main"
description:
name: video_player
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.10.12+5"
video_player_platform_interface:
dependency: transitive
description:
name: video_player_platform_interface
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.2.0"
video_player_web:
dependency: transitive
description:
name: video_player_web
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.1.4+1"
watcher:
dependency: transitive
description:
... ...
... ... @@ -90,7 +90,9 @@ dependencies:
easy_contact_picker: ^0.0.2
flutter_app_badger: ^1.1.2
scrollable_positioned_list: ^0.1.8
image_picker:
image_picker: ^0.6.7+21
video_player: ^0.10.3
photo_view: ^0.9.2
#七牛云sdk
# qiniu_flutter_sdk: ^0.1.0
... ...