@@ -3,6 +3,7 @@ import 'package:phosphor_flutter/phosphor_flutter.dart';
33import 'package:stacked/stacked.dart' ;
44
55import '../../../common/books.dart' ;
6+ import '../../../common/enums.dart' ;
67import '../../../common/themes.dart' ;
78import '../../common/ui_helpers.dart' ;
89import '../../widgets/common/bible_division_indicator/bible_division_indicator.dart' ;
@@ -11,9 +12,11 @@ import 'navigation_sections_chapters_viewmodel.dart';
1112class NavigationSectionsChaptersView extends StackedView <NavigationSectionsChaptersViewModel > {
1213 const NavigationSectionsChaptersView ({
1314 Key ? key,
15+ required this .readerArea,
1416 required this .bookCode,
1517 }) : super (key: key);
1618
19+ final Area readerArea;
1720 final String bookCode;
1821
1922 @override
@@ -87,59 +90,90 @@ class NavigationSectionsChaptersView extends StackedView<NavigationSectionsChapt
8790 const SizedBox (height: 36.0 ),
8891 ],
8992 ),
90- Expanded (
91- child: ListView .builder (
92- itemCount: viewModel.sections.length,
93- itemBuilder: (BuildContext context, int index) {
94- return InkWell (
95- onTap: () => viewModel.onTapSectionItem (index),
96- child: Padding (
97- padding: const EdgeInsets .symmetric (vertical: 8.0 ),
98- child: Row (
99- mainAxisAlignment: MainAxisAlignment .spaceBetween,
100- crossAxisAlignment: CrossAxisAlignment .start,
101- children: [
102- Expanded (
103- child: Column (
104- crossAxisAlignment: CrossAxisAlignment .start,
105- children: [
106- Text (
107- viewModel.getFirstSectionHeading (index),
108- style: TextStyle (
109- color: context.theme.appColors.primary,
110- fontSize: 16.0 ,
93+
94+ // By chapter
95+ if (! viewModel.displaySections)
96+ Expanded (
97+ child: GridView .builder (
98+ itemCount: viewModel.bookChapters.length,
99+ gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent (
100+ maxCrossAxisExtent: 80 ,
101+ childAspectRatio: 4 / 2 ,
102+ crossAxisSpacing: 18 ,
103+ mainAxisSpacing: 18 ,
104+ ),
105+ itemBuilder: (BuildContext context, int index) {
106+ return InkWell (
107+ borderRadius: BorderRadius .circular (12.0 ),
108+ onTap: () => viewModel.onTapChapterItem (index),
109+ child: Center (
110+ child: Text (
111+ viewModel.bookChapters[index],
112+ maxLines: 1 ,
113+ overflow: TextOverflow .ellipsis,
114+ style: Theme .of (context).textTheme.bodyLarge,
115+ ),
116+ ),
117+ );
118+ },
119+ ),
120+ ),
121+
122+ // By section
123+ if (viewModel.displaySections)
124+ Expanded (
125+ child: ListView .builder (
126+ itemCount: viewModel.sections.length,
127+ itemBuilder: (BuildContext context, int index) {
128+ return InkWell (
129+ onTap: () => viewModel.onTapSectionItem (index),
130+ child: Padding (
131+ padding: const EdgeInsets .symmetric (vertical: 8.0 ),
132+ child: Row (
133+ mainAxisAlignment: MainAxisAlignment .spaceBetween,
134+ crossAxisAlignment: CrossAxisAlignment .start,
135+ children: [
136+ Expanded (
137+ child: Column (
138+ crossAxisAlignment: CrossAxisAlignment .start,
139+ children: [
140+ Text (
141+ viewModel.getFirstSectionHeading (index),
142+ style: TextStyle (
143+ color: context.theme.appColors.primary,
144+ fontSize: 16.0 ,
145+ ),
111146 ),
112- ),
113- for ( String alternativeSection in viewModel. getAlternativeSectionHeadings (index))
114- Padding (
115- padding : const EdgeInsets . only (left : 5.0 , top : 2.0 ),
116- child : Text (
117- alternativeSection,
118- style : TextStyle (
119- color : context.theme.appColors.secondary ,
120- fontSize : 13.0 ,
147+ for ( String alternativeSection in viewModel. getAlternativeSectionHeadings (index))
148+ Padding (
149+ padding : const EdgeInsets . only (left : 5.0 , top : 2.0 ),
150+ child : Text (
151+ alternativeSection,
152+ style : TextStyle (
153+ color : context.theme.appColors.secondary,
154+ fontSize : 13.0 ,
155+ ) ,
121156 ),
122- ),
123- )
124- ] ,
157+ )
158+ ],
159+ ) ,
125160 ),
126- ),
127- Padding (
128- padding : const EdgeInsets . only (top : 4.0 ),
129- child : PhosphorIcon (
130- PhosphorIcons . caretRight ( PhosphorIconsStyle .bold) ,
131- color : context.theme.appColors.primary ,
132- size : 18.0 ,
133- semanticLabel : 'Caret right' ,
161+ Padding (
162+ padding : const EdgeInsets . only (top : 4.0 ),
163+ child : PhosphorIcon (
164+ PhosphorIcons . caretRight ( PhosphorIconsStyle .bold),
165+ color : context.theme.appColors.primary ,
166+ size : 18.0 ,
167+ semanticLabel : 'Caret right' ,
168+ ) ,
134169 ),
135- ) ,
136- ] ,
170+ ] ,
171+ ) ,
137172 ),
138- ),
139- );
140- } ,
173+ );
174+ },
175+ ) ,
141176 ),
142- ),
143177 ],
144178 ),
145179 ),
@@ -150,5 +184,5 @@ class NavigationSectionsChaptersView extends StackedView<NavigationSectionsChapt
150184 NavigationSectionsChaptersViewModel viewModelBuilder (
151185 BuildContext context,
152186 ) =>
153- NavigationSectionsChaptersViewModel (bookCode: bookCode);
187+ NavigationSectionsChaptersViewModel (readerArea : readerArea, bookCode: bookCode);
154188}
0 commit comments