Skip to content

Commit 59c8696

Browse files
AlexV525AlexV525
committed
💄 Update picker viewer style for apple os.
1 parent 0198e7f commit 59c8696

File tree

2 files changed

+169
-107
lines changed

2 files changed

+169
-107
lines changed

‎lib/src/widget/asset_picker.dart

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,10 +218,9 @@ class AssetPicker extends StatelessWidget {
218218
/// Return a system ui overlay style according to
219219
/// the brightness of the theme data.
220220
/// 根据主题返回状态栏的明暗样式
221-
SystemUiOverlayStyle get overlayStyle =>
222-
theme.brightness == Brightness.light
223-
? SystemUiOverlayStyle.dark
224-
: SystemUiOverlayStyle.light;
221+
SystemUiOverlayStyle get overlayStyle => theme.brightness == Brightness.light
222+
? SystemUiOverlayStyle.dark
223+
: SystemUiOverlayStyle.light;
225224

226225
/// Path entity select widget.
227226
/// 路径选择部件
@@ -950,7 +949,7 @@ class AssetPicker extends StatelessWidget {
950949
),
951950
color: theme.primaryColor.withOpacity(isAppleOS ? 0.90 : 1.0),
952951
child: Row(children: <Widget>[
953-
previewButton(context),
952+
if (!isSingleAssetMode || !isAppleOS) previewButton(context),
954953
if (isAppleOS) const Spacer(),
955954
if (isAppleOS) confirmButton(context),
956955
]),

‎lib/src/widget/asset_picker_viewer.dart

Lines changed: 165 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -283,26 +283,23 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
283283
child: Row(
284284
children: <Widget>[
285285
const BackButton(),
286-
StreamBuilder<int>(
287-
initialData: currentIndex,
288-
stream: pageStreamController.stream,
289-
builder: (BuildContext _, AsyncSnapshot<int> snapshot) {
290-
return Text(
291-
'${snapshot.data + 1}/${widget.assets.length}',
292-
style: TextStyle(
293-
color: Colors.grey[200],
294-
fontSize: 18.0,
295-
fontWeight: FontWeight.bold,
296-
),
297-
);
298-
},
299-
),
300-
const Spacer(),
301-
if (provider != null)
302-
ChangeNotifierProvider<AssetPickerViewerProvider>.value(
303-
value: provider,
304-
child: confirmButton(context),
286+
if (!isAppleOS)
287+
StreamBuilder<int>(
288+
initialData: currentIndex,
289+
stream: pageStreamController.stream,
290+
builder: (BuildContext _, AsyncSnapshot<int> snapshot) {
291+
return Text(
292+
'${snapshot.data + 1}/${widget.assets.length}',
293+
style: TextStyle(
294+
color: Colors.grey[200],
295+
fontSize: 18.0,
296+
fontWeight: FontWeight.bold,
297+
),
298+
);
299+
},
305300
),
301+
const Spacer(),
302+
if (provider != null) selectButton,
306303
],
307304
),
308305
),
@@ -322,45 +319,43 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
322319
AssetPickerViewerProvider provider,
323320
Widget __,
324321
) {
325-
return Container(
326-
margin: isAppleOS ? const EdgeInsets.only(right: 10.0) : null,
327-
child: MaterialButton(
328-
minWidth: provider.isSelectedNotEmpty ? 48.0 : 20.0,
329-
height: 32.0,
330-
padding: const EdgeInsets.symmetric(horizontal: 12.0),
331-
color: provider.isSelectedNotEmpty
332-
? widget.themeData.buttonColor
333-
: widget.themeData.dividerColor,
334-
shape: RoundedRectangleBorder(
335-
borderRadius: BorderRadius.circular(3.0)),
336-
child: Text(
337-
provider.isSelectedNotEmpty
338-
? '${Constants.textDelegate.confirm}(${provider.currentlySelectedAssets.length}'
339-
'/'
340-
'${widget.selectorProvider.maxAssets})'
341-
: Constants.textDelegate.confirm,
342-
style: TextStyle(
343-
color: provider.isSelectedNotEmpty
344-
? Colors.white
345-
: Colors.grey[600],
346-
fontSize: 17.0,
347-
fontWeight: FontWeight.normal,
348-
),
322+
return MaterialButton(
323+
minWidth: provider.isSelectedNotEmpty ? 48.0 : 20.0,
324+
height: 32.0,
325+
padding: const EdgeInsets.symmetric(horizontal: 12.0),
326+
color: provider.isSelectedNotEmpty
327+
? widget.themeData.buttonColor
328+
: widget.themeData.dividerColor,
329+
shape: RoundedRectangleBorder(
330+
borderRadius: BorderRadius.circular(3.0),
331+
),
332+
child: Text(
333+
provider.isSelectedNotEmpty
334+
? '${Constants.textDelegate.confirm}(${provider.currentlySelectedAssets.length}'
335+
'/'
336+
'${widget.selectorProvider.maxAssets})'
337+
: Constants.textDelegate.confirm,
338+
style: TextStyle(
339+
color: provider.isSelectedNotEmpty
340+
? Colors.white
341+
: Colors.grey[600],
342+
fontSize: 17.0,
343+
fontWeight: FontWeight.normal,
349344
),
350-
onPressed: () {
351-
if (provider.isSelectedNotEmpty) {
352-
Navigator.of(context).pop(provider.currentlySelectedAssets);
353-
}
354-
},
355-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
356345
),
346+
onPressed: () {
347+
if (provider.isSelectedNotEmpty) {
348+
Navigator.of(context).pop(provider.currentlySelectedAssets);
349+
}
350+
},
351+
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
357352
);
358353
},
359354
);
360355

361356
/// Thumb item widget in bottom detail.
362357
/// 底部信息栏单个资源缩略部件
363-
Widget _bottomDetailItem(int index) {
358+
Widget _bottomDetailItem(BuildContext _, int index) {
364359
return Padding(
365360
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
366361
child: AspectRatio(
@@ -405,7 +400,8 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
405400
border: isViewing
406401
? Border.all(
407402
color: widget.themeData.buttonColor,
408-
width: 2.0)
403+
width: 2.0,
404+
)
409405
: null,
410406
color: isSelected ? null : Colors.white54,
411407
),
@@ -436,37 +432,99 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
436432
initialData: currentIndex,
437433
stream: pageStreamController.stream,
438434
builder: (BuildContext _, AsyncSnapshot<int> snapshot) {
439-
return Selector<AssetPickerViewerProvider, List<AssetEntity>>(
440-
selector:
441-
(BuildContext _, AssetPickerViewerProvider provider) =>
442-
provider.currentlySelectedAssets,
443-
builder: (BuildContext _,
444-
List<AssetEntity> currentlySelectedAssets, Widget __) {
445-
final AssetEntity asset =
446-
widget.assets.elementAt(snapshot.data);
447-
final bool selected = currentlySelectedAssets.contains(asset);
448-
return RoundedCheckbox(
449-
value: selected,
450-
onChanged: (bool value) {
451-
if (selected) {
452-
provider.unSelectAssetEntity(asset);
453-
} else {
454-
provider.selectAssetEntity(asset);
455-
}
456-
},
457-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
458-
);
459-
},
435+
return ChangeNotifierProvider<AssetPickerViewerProvider>.value(
436+
value: provider,
437+
child: Selector<AssetPickerViewerProvider, List<AssetEntity>>(
438+
selector: (
439+
BuildContext _,
440+
AssetPickerViewerProvider provider,
441+
) =>
442+
provider.currentlySelectedAssets,
443+
builder: (
444+
BuildContext _,
445+
List<AssetEntity> currentlySelectedAssets,
446+
Widget __,
447+
) {
448+
final AssetEntity asset =
449+
widget.assets.elementAt(snapshot.data);
450+
final bool isSelected =
451+
currentlySelectedAssets.contains(asset);
452+
if (isAppleOS) {
453+
return _appleOSSelectButton(isSelected, asset);
454+
} else {
455+
return _androidSelectButton(isSelected, asset);
456+
}
457+
},
458+
),
460459
);
461460
},
462461
),
463-
Text(
464-
Constants.textDelegate.select,
465-
style: const TextStyle(fontSize: 18.0),
466-
),
462+
if (!isAppleOS)
463+
Text(
464+
Constants.textDelegate.select,
465+
style: const TextStyle(fontSize: 18.0),
466+
),
467467
],
468468
);
469469

470+
/// Select button for apple OS.
471+
/// 苹果系列系统的选择按钮
472+
Widget _appleOSSelectButton(bool isSelected, AssetEntity asset) {
473+
return Padding(
474+
padding: const EdgeInsets.only(right: 10.0),
475+
child: GestureDetector(
476+
behavior: HitTestBehavior.opaque,
477+
onTap: () {
478+
if (isSelected) {
479+
provider.unSelectAssetEntity(asset);
480+
} else {
481+
provider.selectAssetEntity(asset);
482+
}
483+
},
484+
child: AnimatedContainer(
485+
duration: kThemeAnimationDuration,
486+
width: 28.0,
487+
decoration: BoxDecoration(
488+
border: !isSelected
489+
? Border.all(
490+
color: widget.themeData.iconTheme.color,
491+
)
492+
: null,
493+
color: isSelected ? widget.themeData.buttonColor : null,
494+
shape: BoxShape.circle,
495+
),
496+
child: Center(
497+
child: isSelected
498+
? Text(
499+
(currentIndex + 1).toString(),
500+
style: TextStyle(
501+
fontSize: 16.0,
502+
fontWeight: FontWeight.bold,
503+
),
504+
)
505+
: Icon(Icons.check, size: 20.0),
506+
),
507+
),
508+
),
509+
);
510+
}
511+
512+
/// Select button for Android.
513+
/// 安卓系统的选择按钮
514+
Widget _androidSelectButton(bool isSelected, AssetEntity asset) {
515+
return RoundedCheckbox(
516+
value: isSelected,
517+
onChanged: (bool value) {
518+
if (isSelected) {
519+
provider.unSelectAssetEntity(asset);
520+
} else {
521+
provider.selectAssetEntity(asset);
522+
}
523+
},
524+
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
525+
);
526+
}
527+
470528
/// Detail widget aligned to bottom.
471529
/// 底部信息部件
472530
Widget get bottomDetail => AnimatedPositioned(
@@ -478,41 +536,46 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
478536
left: 0.0,
479537
right: 0.0,
480538
height: Screens.bottomSafeHeight + bottomDetailHeight,
481-
child: ChangeNotifierProvider<AssetPickerViewerProvider>.value(
482-
value: provider,
483-
child: Container(
484-
padding: EdgeInsets.only(bottom: Screens.bottomSafeHeight),
485-
color: Colors.grey[850].withOpacity(0.95),
486-
child: Column(
487-
children: <Widget>[
488-
SizedBox(
539+
child: Container(
540+
padding: EdgeInsets.only(bottom: Screens.bottomSafeHeight),
541+
color: widget.themeData.canvasColor.withOpacity(0.95),
542+
child: Column(
543+
children: <Widget>[
544+
ChangeNotifierProvider<AssetPickerViewerProvider>.value(
545+
value: provider,
546+
child: SizedBox(
489547
height: 90.0,
490548
child: ListView.builder(
491549
scrollDirection: Axis.horizontal,
492550
padding: EdgeInsets.zero,
493551
itemCount: widget.selectedAssets.length,
494-
itemBuilder: (BuildContext _, int index) =>
495-
_bottomDetailItem(index),
552+
itemBuilder: _bottomDetailItem,
496553
),
497554
),
498-
Container(
499-
height: 1.0,
500-
color: widget.themeData.dividerColor,
501-
),
502-
Expanded(
503-
child: Padding(
504-
padding: const EdgeInsets.symmetric(horizontal: 20.0),
505-
child: Row(
506-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
507-
children: <Widget>[
508-
const Spacer(),
555+
),
556+
Container(
557+
height: 1.0,
558+
color: widget.themeData.dividerColor,
559+
),
560+
Expanded(
561+
child: Padding(
562+
padding: const EdgeInsets.symmetric(horizontal: 20.0),
563+
child: Row(
564+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
565+
children: <Widget>[
566+
const Spacer(),
567+
if (isAppleOS && provider != null)
568+
ChangeNotifierProvider<AssetPickerViewerProvider>.value(
569+
value: provider,
570+
child: confirmButton(context),
571+
)
572+
else
509573
selectButton,
510-
],
511-
),
574+
],
512575
),
513576
),
514-
],
515-
),
577+
),
578+
],
516579
),
517580
),
518581
);
@@ -523,7 +586,7 @@ class AssetPickerViewerState extends State<AssetPickerViewer>
523586
child: Text(
524587
Constants.textDelegate.loadFailed,
525588
textAlign: TextAlign.center,
526-
style: TextStyle(color: Colors.white, fontSize: 18.0),
589+
style: const TextStyle(fontSize: 18.0),
527590
),
528591
);
529592

0 commit comments

Comments
 (0)