different border radius per device type and os
larger tiles on tablets
This commit is contained in:
parent
b8caf579c3
commit
cc2f9dbb94
@ -46,10 +46,12 @@ class _FullScreenImageViewState extends State<FullScreenImageView> {
|
|||||||
scrollPhysics: const BouncingScrollPhysics(),
|
scrollPhysics: const BouncingScrollPhysics(),
|
||||||
builder: (BuildContext context, int index) {
|
builder: (BuildContext context, int index) {
|
||||||
return PhotoViewGalleryPageOptions(
|
return PhotoViewGalleryPageOptions(
|
||||||
imageProvider: widget.provider.getImageProvider(widget.items[index].uri),
|
imageProvider:
|
||||||
|
widget.provider.getImageProvider(widget.items[index].uri),
|
||||||
initialScale: PhotoViewComputedScale.contained,
|
initialScale: PhotoViewComputedScale.contained,
|
||||||
minScale: PhotoViewComputedScale.contained,
|
minScale: PhotoViewComputedScale.contained,
|
||||||
heroAttributes: PhotoViewHeroAttributes(tag: widget.items[index].name),
|
heroAttributes:
|
||||||
|
PhotoViewHeroAttributes(tag: widget.items[index].name),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
itemCount: widget.items.length,
|
itemCount: widget.items.length,
|
||||||
@ -60,7 +62,8 @@ class _FullScreenImageViewState extends State<FullScreenImageView> {
|
|||||||
child: CircularProgressIndicator(
|
child: CircularProgressIndicator(
|
||||||
value: event == null || event.expectedTotalBytes == null
|
value: event == null || event.expectedTotalBytes == null
|
||||||
? null
|
? null
|
||||||
: event.cumulativeBytesLoaded / event.expectedTotalBytes!,
|
: event.cumulativeBytesLoaded /
|
||||||
|
event.expectedTotalBytes!,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import 'dart:io';
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:gallery/utils/tile_size.dart';
|
||||||
import 'data_provider/data_provider.dart';
|
import 'data_provider/data_provider.dart';
|
||||||
|
|
||||||
import 'full_screen_image_view.dart';
|
import 'full_screen_image_view.dart';
|
||||||
@ -43,15 +42,13 @@ class _ImageGridState extends State<ImageGrid> {
|
|||||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||||
crossAxisSpacing: 0,
|
crossAxisSpacing: 0,
|
||||||
mainAxisSpacing: 0,
|
mainAxisSpacing: 0,
|
||||||
crossAxisCount:
|
crossAxisCount: width ~/ calcTileMaxWidth(),
|
||||||
Platform.isAndroid ? width ~/ 100 : width ~/ 300,
|
|
||||||
),
|
),
|
||||||
itemCount: data.items.length + 1,
|
itemCount: data.items.length + 1,
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
return ImageTile(
|
return ImageTile(
|
||||||
child: Icon(Icons.arrow_back,
|
child: Icon(Icons.arrow_back, size: calcTileMaxWidth() / 2),
|
||||||
size: Platform.isAndroid ? 64 : 142),
|
|
||||||
onClick: () {
|
onClick: () {
|
||||||
setState(() {
|
setState(() {
|
||||||
folder = widget.dProvider.listOfFiles(uri: data.parent);
|
folder = widget.dProvider.listOfFiles(uri: data.parent);
|
||||||
@ -98,7 +95,7 @@ class _ImageGridState extends State<ImageGrid> {
|
|||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
Icon(Icons.folder_open,
|
Icon(Icons.folder_open,
|
||||||
size: Platform.isAndroid ? 64 : 142),
|
size: calcTileMaxWidth() / 2),
|
||||||
Text(elem.name)
|
Text(elem.name)
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:gallery/data_provider/data_provider.dart';
|
import 'package:gallery/data_provider/data_provider.dart';
|
||||||
|
import 'package:gallery/utils/tile_size.dart';
|
||||||
|
|
||||||
class ImageTile extends StatelessWidget {
|
class ImageTile extends StatelessWidget {
|
||||||
const ImageTile(
|
const ImageTile(
|
||||||
@ -17,24 +18,32 @@ class ImageTile extends StatelessWidget {
|
|||||||
onClick?.call();
|
onClick?.call();
|
||||||
},
|
},
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: const EdgeInsets.all(5),
|
padding: const EdgeInsets.all(3),
|
||||||
child: Container(
|
child: Container(
|
||||||
decoration: imageUri == null
|
decoration: imageUri == null
|
||||||
? const BoxDecoration(
|
? BoxDecoration(
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
borderRadius: BorderRadius.all(Radius.circular(10.0)),
|
borderRadius: BorderRadius.all(
|
||||||
|
Radius.circular(calcTileMaxWidth() / 30)),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black12,
|
color: Colors.black12,
|
||||||
spreadRadius: 2.0,
|
spreadRadius: calcTileMaxWidth() / 150,
|
||||||
blurRadius: 5.0),
|
blurRadius: calcTileMaxWidth() / 60),
|
||||||
])
|
])
|
||||||
: BoxDecoration(
|
: BoxDecoration(
|
||||||
image: DecorationImage(
|
image: DecorationImage(
|
||||||
fit: BoxFit.cover,
|
fit: BoxFit.cover,
|
||||||
image: dtaProvider!.getImageProvider(imageUri!),
|
image: dtaProvider!.getImageProvider(imageUri!),
|
||||||
),
|
),
|
||||||
),
|
borderRadius: BorderRadius.all(
|
||||||
|
Radius.circular(calcTileMaxWidth() / 30)),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black12,
|
||||||
|
spreadRadius: calcTileMaxWidth() / 150,
|
||||||
|
blurRadius: calcTileMaxWidth() / 60),
|
||||||
|
]),
|
||||||
child: child)),
|
child: child)),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
24
lib/utils/tile_size.dart
Normal file
24
lib/utils/tile_size.dart
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import 'dart:io';
|
||||||
|
|
||||||
|
import 'package:flutter/widgets.dart';
|
||||||
|
|
||||||
|
enum DeviceType { phone, tablet }
|
||||||
|
|
||||||
|
DeviceType getDeviceType() {
|
||||||
|
final data = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
|
||||||
|
return data.size.shortestSide < 550 ? DeviceType.phone : DeviceType.tablet;
|
||||||
|
}
|
||||||
|
|
||||||
|
int calcTileMaxWidth() {
|
||||||
|
if (Platform.isLinux || Platform.isMacOS || Platform.isWindows) {
|
||||||
|
return 300;
|
||||||
|
} else if (Platform.isAndroid || Platform.isIOS) {
|
||||||
|
if (getDeviceType() == DeviceType.tablet) {
|
||||||
|
return 150;
|
||||||
|
} else {
|
||||||
|
return 100;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 250;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user