lukas/Gallery
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

different border radius per device type and os

Browse Source 
larger tiles on tablets
This commit is contained in:
lukas-heiligenbrunner 2022-09-29 21:01:28 +02:00
parent b8caf579c3
commit cc2f9dbb94
4 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/full_screen_image_view.dart
View File

@ -46,10 +46,12 @@ class _FullScreenImageViewState extends State<FullScreenImageView> {
scrollPhysics: const BouncingScrollPhysics(),
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider: widget.provider.getImageProvider(widget.items[index].uri),
imageProvider:
widget.provider.getImageProvider(widget.items[index].uri),
initialScale: PhotoViewComputedScale.contained,
minScale: PhotoViewComputedScale.contained,
heroAttributes: PhotoViewHeroAttributes(tag: widget.items[index].name),
heroAttributes:
PhotoViewHeroAttributes(tag: widget.items[index].name),
);
},
itemCount: widget.items.length,
@ -60,7 +62,8 @@ class _FullScreenImageViewState extends State<FullScreenImageView> {
child: CircularProgressIndicator(
value: event == null || event.expectedTotalBytes == null
? null
: event.cumulativeBytesLoaded / event.expectedTotalBytes!,
: event.cumulativeBytesLoaded /
event.expectedTotalBytes!,
),
),
),

11
lib/image_grid.dart
View File

@ -1,6 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:gallery/utils/tile_size.dart';
import 'data_provider/data_provider.dart';
import 'full_screen_image_view.dart';
@ -43,15 +42,13 @@ class _ImageGridState extends State<ImageGrid> {
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount:
Platform.isAndroid ? width ~/ 100 : width ~/ 300,
crossAxisCount: width ~/ calcTileMaxWidth(),
),
itemCount: data.items.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return ImageTile(
child: Icon(Icons.arrow_back,
size: Platform.isAndroid ? 64 : 142),
child: Icon(Icons.arrow_back, size: calcTileMaxWidth() / 2),
onClick: () {
setState(() {
folder = widget.dProvider.listOfFiles(uri: data.parent);
@ -98,7 +95,7 @@ class _ImageGridState extends State<ImageGrid> {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.folder_open,
size: Platform.isAndroid ? 64 : 142),
size: calcTileMaxWidth() / 2),
Text(elem.name)
],
)

21
lib/image_tile.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:gallery/data_provider/data_provider.dart';
import 'package:gallery/utils/tile_size.dart';
class ImageTile extends StatelessWidget {
const ImageTile(
@ -17,24 +18,32 @@ class ImageTile extends StatelessWidget {
onClick?.call();
},
child: Container(
padding: const EdgeInsets.all(5),
padding: const EdgeInsets.all(3),
child: Container(
decoration: imageUri == null
? const BoxDecoration(
? BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderRadius: BorderRadius.all(
Radius.circular(calcTileMaxWidth() / 30)),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 2.0,
blurRadius: 5.0),
spreadRadius: calcTileMaxWidth() / 150,
blurRadius: calcTileMaxWidth() / 60),
])
: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: dtaProvider!.getImageProvider(imageUri!),
),
),
borderRadius: BorderRadius.all(
Radius.circular(calcTileMaxWidth() / 30)),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: calcTileMaxWidth() / 150,
blurRadius: calcTileMaxWidth() / 60),
]),
child: child)),
);
}

24
lib/utils/tile_size.dart Normal file
View 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;
}
}