~repos /only-bible-app
git clone https://pyrossh.dev/repos/only-bible-app.git
The only bible app you will ever need. No ads. No in-app purchases. No distractions.
e62ed14c
—
pyrossh 2 years ago
improve mobile appBar
- lib/screens/chapter_view_screen.dart +20 -16
- lib/theme.dart +9 -0
- lib/widgets/chapter_app_bar.dart +61 -0
- lib/widgets/header.dart +1 -1
- lib/widgets/menu.dart +3 -2
lib/screens/chapter_view_screen.dart
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "package:flutter/material.dart";
|
|
2
2
|
import "package:flutter_swipe_detector/flutter_swipe_detector.dart";
|
|
3
|
+
import "package:only_bible_app/widgets/chapter_app_bar.dart";
|
|
3
4
|
import "package:only_bible_app/widgets/header.dart";
|
|
4
5
|
import "package:only_bible_app/state.dart";
|
|
5
6
|
import "package:only_bible_app/widgets/sidebar.dart";
|
|
@@ -31,6 +32,7 @@ class ChapterViewScreen extends StatelessWidget {
|
|
|
31
32
|
// );
|
|
32
33
|
// },
|
|
33
34
|
// ),
|
|
35
|
+
final isDesktop = isWide(context);
|
|
34
36
|
final model = ChapterViewModel(
|
|
35
37
|
book: book,
|
|
36
38
|
chapter: chapter,
|
|
@@ -39,8 +41,8 @@ class ChapterViewScreen extends StatelessWidget {
|
|
|
39
41
|
return ChangeNotifierProvider.value(
|
|
40
42
|
value: model,
|
|
41
43
|
child: Scaffold(
|
|
44
|
+
appBar: isDesktop ? null : const ChapterAppBar(),
|
|
42
45
|
backgroundColor: Theme.of(context).colorScheme.background,
|
|
43
|
-
// bottomSheet: const ActionsBar(),
|
|
44
46
|
body: SafeArea(
|
|
45
47
|
child: SwipeDetector(
|
|
46
48
|
onSwipeLeft: (offset) {
|
|
@@ -49,25 +51,27 @@ class ChapterViewScreen extends StatelessWidget {
|
|
|
49
51
|
onSwipeRight: (offset) {
|
|
50
52
|
model.onPrevious(context, book, chapter);
|
|
51
53
|
},
|
|
52
|
-
child: Row(
|
|
53
|
-
children: [
|
|
54
|
-
if (isWide(context)) const Sidebar(),
|
|
55
|
-
const Flexible(
|
|
56
|
-
|
|
54
|
+
child: isDesktop
|
|
55
|
+
? const Row(
|
|
57
56
|
children: [
|
|
58
|
-
|
|
57
|
+
Sidebar(),
|
|
59
58
|
Flexible(
|
|
59
|
+
child: Column(
|
|
60
|
+
children: [
|
|
61
|
+
Header(),
|
|
62
|
+
Flexible(
|
|
60
|
-
|
|
63
|
+
child: VerseList(),
|
|
64
|
+
),
|
|
65
|
+
// TODO: add padding only if bottom sheet is shown
|
|
66
|
+
// Padding(
|
|
67
|
+
// padding: EdgeInsets.only(bottom: 40),
|
|
68
|
+
// )
|
|
69
|
+
],
|
|
70
|
+
),
|
|
61
71
|
),
|
|
62
|
-
// TODO: add padding only if bottom sheet is shown
|
|
63
|
-
// Padding(
|
|
64
|
-
// padding: EdgeInsets.only(bottom: 40),
|
|
65
|
-
// )
|
|
66
72
|
],
|
|
67
|
-
)
|
|
73
|
+
)
|
|
68
|
-
),
|
|
74
|
+
: const VerseList(),
|
|
69
|
-
],
|
|
70
|
-
),
|
|
71
75
|
),
|
|
72
76
|
),
|
|
73
77
|
),
|
lib/theme.dart
CHANGED
|
@@ -12,6 +12,12 @@ final lightTheme = ThemeData(
|
|
|
12
12
|
hoverColor: const Color(0xAAF8D0DC),
|
|
13
13
|
dividerColor: Colors.black,
|
|
14
14
|
shadowColor: Colors.black,
|
|
15
|
+
appBarTheme: const AppBarTheme(
|
|
16
|
+
backgroundColor: Colors.white,
|
|
17
|
+
toolbarHeight: 30,
|
|
18
|
+
elevation: 0,
|
|
19
|
+
scrolledUnderElevation: 0,
|
|
20
|
+
),
|
|
15
21
|
bottomSheetTheme: const BottomSheetThemeData(
|
|
16
22
|
elevation: 10,
|
|
17
23
|
shadowColor: Colors.black,
|
|
@@ -111,6 +117,9 @@ final darkTheme = ThemeData(
|
|
|
111
117
|
hoverColor: const Color(0xAA5D4979),
|
|
112
118
|
dividerColor: Colors.white,
|
|
113
119
|
shadowColor: Colors.white,
|
|
120
|
+
appBarTheme: lightTheme.appBarTheme.copyWith(
|
|
121
|
+
backgroundColor: const Color(0xFF1F1F22),
|
|
122
|
+
),
|
|
114
123
|
bottomSheetTheme: const BottomSheetThemeData(
|
|
115
124
|
elevation: 1,
|
|
116
125
|
shape: Border(
|
lib/widgets/chapter_app_bar.dart
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import "package:flutter/material.dart";
|
|
2
|
+
import "package:only_bible_app/screens/book_select_screen.dart";
|
|
3
|
+
import "package:only_bible_app/state.dart";
|
|
4
|
+
import "package:only_bible_app/widgets/menu.dart";
|
|
5
|
+
|
|
6
|
+
class ChapterAppBar extends StatelessWidget implements PreferredSizeWidget {
|
|
7
|
+
const ChapterAppBar({super.key});
|
|
8
|
+
|
|
9
|
+
@override
|
|
10
|
+
Size get preferredSize => const Size.fromHeight(30);
|
|
11
|
+
|
|
12
|
+
@override
|
|
13
|
+
Widget build(BuildContext context) {
|
|
14
|
+
final selectedBible = AppModel.of(context).bible;
|
|
15
|
+
final model = ChapterViewModel.of(context);
|
|
16
|
+
final selectedBook = selectedBible.books[model.book];
|
|
17
|
+
final bookName = selectedBook.name;
|
|
18
|
+
return AppBar(
|
|
19
|
+
excludeHeaderSemantics: true,
|
|
20
|
+
// bottom: const PreferredSize(
|
|
21
|
+
// preferredSize: Size.fromHeight(1),
|
|
22
|
+
// child: Divider(height: 0, thickness: 1, indent: 18, endIndent: 20),
|
|
23
|
+
// ),
|
|
24
|
+
title: TextButton.icon(
|
|
25
|
+
style: TextButton.styleFrom(
|
|
26
|
+
padding: EdgeInsets.zero,
|
|
27
|
+
backgroundColor: Theme.of(context).colorScheme.background,
|
|
28
|
+
elevation: 0,
|
|
29
|
+
),
|
|
30
|
+
label: Icon(
|
|
31
|
+
Icons.expand_more,
|
|
32
|
+
size: 28,
|
|
33
|
+
color: Theme.of(context).textTheme.headlineMedium!.color,
|
|
34
|
+
),
|
|
35
|
+
icon: Text(
|
|
36
|
+
"$bookName ${model.chapter + 1}",
|
|
37
|
+
style: Theme.of(context).textTheme.headlineMedium,
|
|
38
|
+
),
|
|
39
|
+
onPressed: () {
|
|
40
|
+
Navigator.of(context).push(
|
|
41
|
+
createNoTransitionPageRoute(
|
|
42
|
+
BookSelectScreen(bible: selectedBible),
|
|
43
|
+
),
|
|
44
|
+
);
|
|
45
|
+
},
|
|
46
|
+
),
|
|
47
|
+
centerTitle: false,
|
|
48
|
+
surfaceTintColor: Colors.white,
|
|
49
|
+
leading: null,
|
|
50
|
+
automaticallyImplyLeading: false,
|
|
51
|
+
actions: const [
|
|
52
|
+
Menu(),
|
|
53
|
+
// IconButton(
|
|
54
|
+
// padding: EdgeInsets.zero,
|
|
55
|
+
// onPressed: () {},
|
|
56
|
+
// icon: const Icon(Icons.more_vert),
|
|
57
|
+
// ),
|
|
58
|
+
],
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
}
|
lib/widgets/header.dart
CHANGED
|
@@ -13,8 +13,8 @@ class Header extends StatelessWidget {
|
|
|
13
13
|
final selectedBible = AppModel.of(context).bible;
|
|
14
14
|
final model = ChapterViewModel.of(context);
|
|
15
15
|
final selectedBook = selectedBible.books[model.book];
|
|
16
|
-
final isDesktop = isWide(context);
|
|
17
16
|
final bookName = selectedBook.name;
|
|
17
|
+
final isDesktop = isWide(context);
|
|
18
18
|
// Localizations.localeOf(context).languageCode
|
|
19
19
|
return Container(
|
|
20
20
|
padding: EdgeInsets.only(
|
lib/widgets/menu.dart
CHANGED
|
@@ -12,8 +12,9 @@ class Menu extends StatelessWidget {
|
|
|
12
12
|
final modeIcon = model.darkMode ? Icons.dark_mode : Icons.light_mode;
|
|
13
13
|
final boldColor = model.fontBold ? Theme.of(context).shadowColor : Colors.grey;
|
|
14
14
|
return PopupMenuButton(
|
|
15
|
+
padding: EdgeInsets.zero,
|
|
15
|
-
icon:
|
|
16
|
+
icon: Icon(Icons.more_vert, size: isDesktop ? 28 : 22),
|
|
16
|
-
offset:
|
|
17
|
+
offset: Offset(0.0, isDesktop ? 60 : 30),
|
|
17
18
|
onSelected: (int v) {
|
|
18
19
|
if (v == 1) {
|
|
19
20
|
Navigator.of(context).push(
|