Skip to content

Commit 56ed4e8

Browse files
JideGururestyled-io[bot]restyled-commits
authored
feat: better layout on desktop, tablet and web (JideGuru#108)
* feat: better layout on desktop, tablet and web * chore: added desktop screenshot * chore: added desktop screenshot * Restyled by prettier-markdown (JideGuru#109) Co-authored-by: Restyled.io <commits@restyled.io> * fix: fixed snackbar text colors * fix: minor fixes --------- Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
1 parent baf5a46 commit 56ed4e8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1220
-683
lines changed

‎README.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,23 @@ You can download from the appstore if you use an iPhone, iPad or a Mac with Sili
3838
<!-- <img src="ss/mockup.png"/> -->
3939

4040
| Light | Dark |
41-
|-----------------------------------|-----------------------------------|
42-
| <img src="ss/1.png" width="400"> | <img src="ss/2.png" width="400"> |
43-
| <img src="ss/3.png" width="400"> | <img src="ss/4.png" width="400"> |
44-
| <img src="ss/5.png" width="400"> | <img src="ss/6.png" width="400"> |
45-
| <img src="ss/7.png" width="400"> | <img src="ss/8.png" width="400"> |
46-
| <img src="ss/9.png" width="400"> | <img src="ss/10.png" width="400"> |
47-
| <img src="ss/11.png" width="400"> | <img src="ss/12.png" width="400"> |
48-
| <img src="ss/13.png" width="400"> | <img src="ss/14.png" width="400"> |
41+
| --------------------------------- | --------------------------------- |
42+
| <img src="ss/1.png" width="300"> | <img src="ss/2.png" width="300"> |
43+
| <img src="ss/3.png" width="300"> | <img src="ss/4.png" width="300"> |
44+
| <img src="ss/5.png" width="300"> | <img src="ss/6.png" width="300"> |
45+
| <img src="ss/7.png" width="300"> | <img src="ss/8.png" width="300"> |
46+
| <img src="ss/9.png" width="300"> | <img src="ss/10.png" width="300"> |
47+
| <img src="ss/11.png" width="300"> | <img src="ss/12.png" width="300"> |
48+
| <img src="ss/13.png" width="300"> | <img src="ss/14.png" width="300"> |
49+
50+
##### Desktop
51+
52+
<img src="ss/desktop_1.png" width="800">
4953

5054
## 🔌 Plugins
5155

5256
| Name | Usage |
53-
|------------------------------------------------------------------------|-----------------------------------------------|
57+
| ---------------------------------------------------------------------- | --------------------------------------------- |
5458
| [**Riverpod**](https://pub.dev/packages/flutter_riverpod) | State Management |
5559
| [**Sembast**](https://pub.dev/packages/sembast) | NoSQL database to store Favorites & Downloads |
5660
| [**XML2JSON**](https://pub.dev/packages/xml2json) | Convert XML to JSON |
@@ -66,8 +70,6 @@ You can download from the appstore if you use an iPhone, iPad or a Mac with Sili
6670

6771
[Apache-2.0](https://github.com/JideGuru/FlutterEbookApp/blob/master/LICENSE)
6872

69-
7073
<a href="https://github.com/JideGuru/FlutterEbookApp">
7174
<img width="500" alt="Star History Chart" src="https://api.star-history.com/svg?repos=JideGuru/FlutterEbookApp&type=Date">
72-
</a>
73-
75+
</a>

‎lib/main.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class MyApp extends ConsumerWidget {
3232
? ThemeConfig.darkTheme
3333
: ThemeConfig.lightTheme,
3434
),
35-
darkTheme: themeData(ThemeConfig.darkTheme),
35+
// darkTheme: themeData(ThemeConfig.darkTheme),
3636
routerConfig: _appRouter.config(),
3737
);
3838
}

‎lib/src/features/book_details/screens/book_details_screen.dart‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ class _BookDetailsScreenState extends ConsumerState<BookDetailsScreen> {
4242
Widget build(BuildContext context) {
4343
return Scaffold(
4444
appBar: AppBar(
45+
backgroundColor: context.isSmallScreen ? null : Colors.transparent,
4546
actions: <Widget>[
4647
ref.watch(favoritesStateNotifierProvider).maybeWhen(
4748
orElse: () => const SizedBox.shrink(),
@@ -322,12 +323,9 @@ class _DownloadButton extends ConsumerWidget {
322323
return EpubScreen.fromPath(filePath: path);
323324
}));
324325
} else {
325-
const snackBar = SnackBar(
326-
content: Text(
327-
'Could not find the book file. Please download it again.',
328-
),
326+
context.showSnackBarUsingText(
327+
'Could not find the book file. Please download it again.',
329328
);
330-
context.showSnackBar(snackBar);
331329
ref.read(downloadsStateNotifierProvider.notifier).deleteBook(id);
332330
}
333331
}
@@ -368,13 +366,25 @@ class _MoreBooksFromAuthorState extends ConsumerState<_MoreBooksFromAuthor> {
368366
@override
369367
void initState() {
370368
super.initState();
369+
_fetch();
370+
}
371+
372+
void _fetch() {
371373
WidgetsBinding.instance.addPostFrameCallback((_) {
372374
ref
373375
.read(bookDetailsStateNotifierProvider.notifier)
374376
.fetch(widget.authorUrl);
375377
});
376378
}
377379

380+
@override
381+
void didUpdateWidget(covariant oldWidget) {
382+
super.didUpdateWidget(oldWidget);
383+
if (oldWidget.authorUrl != widget.authorUrl) {
384+
_fetch();
385+
}
386+
}
387+
378388
@override
379389
Widget build(BuildContext context) {
380390
return ref.watch(bookDetailsStateNotifierProvider).maybeWhen(

‎lib/src/features/common/database/database_config.dart‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import 'package:flutter/foundation.dart';
12
import 'package:path/path.dart';
23
import 'package:path_provider/path_provider.dart';
34
import 'package:sembast/sembast.dart';
45
import 'package:sembast/sembast_io.dart';
6+
import 'package:sembast_web/sembast_web.dart';
57

68
abstract class DatabaseConfig {
79
static Database getDatabaseInstance(String dbName) {
@@ -26,7 +28,7 @@ abstract class DatabaseConfig {
2628
) async {
2729
for (var name in dbNames) {
2830
final dbPath = await _generateDbPath(name);
29-
final dbFactory = databaseFactoryIo;
31+
final dbFactory = kIsWeb ? databaseFactoryWeb : databaseFactoryIo;
3032
final db = await dbFactory.openDatabase(dbPath);
3133
final databaseReference = _instances[name];
3234
if (databaseReference != null) await databaseReference.close();
@@ -44,6 +46,7 @@ abstract class DatabaseConfig {
4446
static String get favoritesDatabaseName => 'favorites11.db';
4547

4648
static Future<String> _generateDbPath(String dbName) async {
49+
if (kIsWeb) return dbName;
4750
final dir = await getApplicationDocumentsDirectory();
4851
await dir.create(recursive: true);
4952
final dbPath = join(dir.path, dbName);

‎lib/src/features/common/extensions/context_extensions.dart‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,33 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_ebook_app/src/features/common/extensions/extensions.dart';
23

34
extension BuildContextExtensions on BuildContext {
45
ThemeData get theme => Theme.of(this);
6+
57
Size get screenSize => MediaQuery.sizeOf(this);
8+
69
EdgeInsets get screenPadding => MediaQuery.paddingOf(this);
10+
711
double get screenTextScaleFactor => MediaQuery.textScaleFactorOf(this);
12+
13+
bool get isSmallScreen => screenSize.width < 800;
14+
15+
bool get isMediumScreen =>
16+
screenSize.width >= 800 && screenSize.width <= 1200;
17+
18+
bool get isLargeScreen => screenSize.width > 800;
19+
820
void showSnackBar(SnackBar snackBar) {
921
ScaffoldMessenger.of(this).showSnackBar(snackBar);
1022
}
23+
24+
void showSnackBarUsingText(String text) {
25+
final snackBar = SnackBar(
26+
content: Text(
27+
text,
28+
style: const TextStyle(color: Colors.white),
29+
),
30+
);
31+
ScaffoldMessenger.of(this).showSnackBar(snackBar);
32+
}
1133
}

‎lib/src/features/common/widgets/book_card.dart‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import 'package:auto_route/auto_route.dart';
22
import 'package:cached_network_image/cached_network_image.dart';
33
import 'package:flutter/material.dart';
4-
import 'package:flutter_ebook_app/src/features/common/widgets/loading_widget.dart';
5-
import 'package:flutter_ebook_app/src/features/common/data/models/category_feed.dart';
4+
import 'package:flutter_ebook_app/src/features/features.dart';
65
import 'package:flutter_ebook_app/src/router/app_router.dart';
6+
import 'package:flutter_riverpod/flutter_riverpod.dart';
77
import 'package:uuid/uuid.dart';
88

9-
class BookCard extends StatelessWidget {
9+
class BookCard extends ConsumerWidget {
1010
final String img;
1111
final Entry entry;
1212

@@ -22,7 +22,7 @@ class BookCard extends StatelessWidget {
2222
final String authorTag = uuid.v4();
2323

2424
@override
25-
Widget build(BuildContext context) {
25+
Widget build(BuildContext context, WidgetRef ref) {
2626
return SizedBox(
2727
width: 120.0,
2828
child: Card(
@@ -33,14 +33,18 @@ class BookCard extends StatelessWidget {
3333
child: InkWell(
3434
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
3535
onTap: () {
36-
context.router.push(
37-
BookDetailsRoute(
38-
entry: entry,
39-
imgTag: imgTag,
40-
titleTag: titleTag,
41-
authorTag: authorTag,
42-
),
36+
bool isHomeTab = ref.read(currentTabNotifierProvider).isHomeTab;
37+
final route = BookDetailsRoute(
38+
entry: entry,
39+
imgTag: imgTag,
40+
titleTag: titleTag,
41+
authorTag: authorTag,
4342
);
43+
if (context.isSmallScreen || !isHomeTab) {
44+
context.router.push(route);
45+
} else {
46+
context.router.replace(route);
47+
}
4448
},
4549
child: ClipRRect(
4650
borderRadius: const BorderRadius.all(

‎lib/src/features/common/widgets/book_item.dart‎

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import 'package:auto_route/auto_route.dart';
12
import 'package:cached_network_image/cached_network_image.dart';
23
import 'package:flutter/material.dart';
3-
import 'package:flutter_ebook_app/src/features/book_details/screens/book_details_screen.dart';
4-
import 'package:flutter_ebook_app/src/features/common/data/models/category_feed.dart';
5-
import 'package:flutter_ebook_app/src/features/common/widgets/loading_widget.dart';
6-
import 'package:iridium_reader_widget/util/router.dart';
4+
import 'package:flutter_ebook_app/src/features/features.dart';
5+
import 'package:flutter_ebook_app/src/router/app_router.dart';
6+
import 'package:flutter_riverpod/flutter_riverpod.dart';
77
import 'package:uuid/uuid.dart';
88

9-
class BookItem extends StatelessWidget {
9+
class BookItem extends ConsumerWidget {
1010
final String img;
1111
final String title;
1212
final Entry entry;
@@ -24,59 +24,65 @@ class BookItem extends StatelessWidget {
2424
final String authorTag = uuid.v4();
2525

2626
@override
27-
Widget build(BuildContext context) {
28-
return InkWell(
29-
onTap: () {
30-
MyRouter.pushPage(
31-
context,
32-
BookDetailsScreen(
27+
Widget build(BuildContext context, WidgetRef ref) {
28+
return SizedBox(
29+
width: 150,
30+
child: InkWell(
31+
onTap: () {
32+
bool isHomeTab = ref.read(currentTabNotifierProvider).isHomeTab;
33+
final route = BookDetailsRoute(
3334
entry: entry,
3435
imgTag: imgTag,
3536
titleTag: titleTag,
3637
authorTag: authorTag,
37-
),
38-
);
39-
},
40-
child: Column(
41-
children: <Widget>[
42-
ClipRRect(
43-
borderRadius: const BorderRadius.all(
44-
Radius.circular(10.0),
45-
),
46-
child: Hero(
47-
tag: imgTag,
48-
child: CachedNetworkImage(
49-
imageUrl: img,
50-
placeholder: (context, url) => const LoadingWidget(
51-
isImage: true,
52-
),
53-
errorWidget: (context, url, error) => Image.asset(
54-
'assets/images/place.png',
38+
);
39+
if (context.isSmallScreen || !isHomeTab) {
40+
context.router.push(route);
41+
} else {
42+
context.router.replace(route);
43+
}
44+
},
45+
child: Column(
46+
children: <Widget>[
47+
ClipRRect(
48+
borderRadius: const BorderRadius.all(
49+
Radius.circular(10.0),
50+
),
51+
child: Hero(
52+
tag: imgTag,
53+
child: CachedNetworkImage(
54+
imageUrl: img,
55+
placeholder: (context, url) => const LoadingWidget(
56+
isImage: true,
57+
),
58+
errorWidget: (context, url, error) => Image.asset(
59+
'assets/images/place.png',
60+
fit: BoxFit.cover,
61+
),
5562
fit: BoxFit.cover,
63+
height: 150.0,
5664
),
57-
fit: BoxFit.cover,
58-
height: 150.0,
5965
),
6066
),
61-
),
62-
const SizedBox(height: 5.0),
63-
Hero(
64-
tag: titleTag,
65-
child: Material(
66-
type: MaterialType.transparency,
67-
child: Text(
68-
title.replaceAll(r'\', ''),
69-
style: const TextStyle(
70-
fontSize: 14.0,
71-
fontWeight: FontWeight.bold,
67+
const SizedBox(height: 5.0),
68+
Hero(
69+
tag: titleTag,
70+
child: Material(
71+
type: MaterialType.transparency,
72+
child: Text(
73+
title.replaceAll(r'\', ''),
74+
style: const TextStyle(
75+
fontSize: 14.0,
76+
fontWeight: FontWeight.bold,
77+
),
78+
textAlign: TextAlign.center,
79+
maxLines: 2,
80+
overflow: TextOverflow.ellipsis,
7281
),
73-
textAlign: TextAlign.center,
74-
maxLines: 2,
75-
overflow: TextOverflow.ellipsis,
7682
),
7783
),
78-
),
79-
],
84+
],
85+
),
8086
),
8187
);
8288
}

‎lib/src/features/common/widgets/book_list_item.dart‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import 'package:cached_network_image/cached_network_image.dart';
33
import 'package:flutter/material.dart';
44
import 'package:flutter_ebook_app/src/features/features.dart';
55
import 'package:flutter_ebook_app/src/router/app_router.dart';
6+
import 'package:flutter_riverpod/flutter_riverpod.dart';
67
import 'package:uuid/uuid.dart';
78

8-
class BookListItem extends StatelessWidget {
9+
class BookListItem extends ConsumerWidget {
910
final Entry entry;
1011

1112
BookListItem({
@@ -19,17 +20,21 @@ class BookListItem extends StatelessWidget {
1920
final String authorTag = uuid.v4();
2021

2122
@override
22-
Widget build(BuildContext context) {
23+
Widget build(BuildContext context, WidgetRef ref) {
2324
return InkWell(
2425
onTap: () {
25-
context.router.push(
26-
BookDetailsRoute(
27-
entry: entry,
28-
imgTag: imgTag,
29-
titleTag: titleTag,
30-
authorTag: authorTag,
31-
),
26+
bool isHomeTab = ref.read(currentTabNotifierProvider).isHomeTab;
27+
final route = BookDetailsRoute(
28+
entry: entry,
29+
imgTag: imgTag,
30+
titleTag: titleTag,
31+
authorTag: authorTag,
3232
);
33+
if (context.isSmallScreen || !isHomeTab) {
34+
context.router.push(route);
35+
} else {
36+
context.router.replace(route);
37+
}
3338
},
3439
child: SizedBox(
3540
height: 150.0,

0 commit comments

Comments
 (0)