added safe area and pemilih detail bottom sheet

lib/app/app.bottomsheets.dart

@@ -7,10 +7,12 @@
 import 'package:stacked_services/stacked_services.dart';
 
 import 'app.locator.dart';
+import '../ui/views/tim_survei_index_tracking/halaman_history/detail_suara_pemilih_bottom_sheet/detail_suara_pemilih_bottom_sheet_view.dart';
 import '../ui/views/tim_survei_index_tracking/halaman_survei/bottom_sheet_cari_area/bottom_sheet_cari_area_view.dart';
 
 enum BottomSheetType {
   bottomSheetCariAreaView,
+  detailSuaraPemilihBottomSheetView,
 }
 
 void setupBottomSheetUi() {
@@ -19,6 +21,9 @@ void setupBottomSheetUi() {
   final Map<BottomSheetType, SheetBuilder> builders = {
     BottomSheetType.bottomSheetCariAreaView: (context, request, completer) =>
         BottomSheetCariAreaView(request: request, completer: completer),
+    BottomSheetType.detailSuaraPemilihBottomSheetView:
+        (context, request, completer) => DetailSuaraPemilihBottomSheetView(
+            request: request, completer: completer),
   };
 
   bottomsheetService.setCustomSheetBuilders(builders);

lib/app/app.dart

@@ -14,6 +14,7 @@ import '../ui/views/tim_survei_index_tracking/halaman_history/halaman_history_vi
 import '../ui/views/tim_survei_index_tracking/halaman_pengaturan/halaman_pengaturan_view.dart';
 
 import '../ui/views/tim_survei_index_tracking/halaman_survei/bottom_sheet_cari_area/bottom_sheet_cari_area_view.dart';
+import '../ui/views/tim_survei_index_tracking/halaman_history/detail_suara_pemilih_bottom_sheet/detail_suara_pemilih_bottom_sheet_view.dart';
 import '../ui/views/tim_survei_index_tracking/halaman_survei/halaman_survei_view.dart';
 import '../ui/views/tim_survei_index_tracking/tim_survei_index_tracking_view.dart';
 
@@ -51,6 +52,7 @@ import '../ui/views/tim_survei_index_tracking/tim_survei_index_tracking_view.dar
   logger: StackedLogger(),
   bottomsheets: [
     StackedBottomsheet(classType: BottomSheetCariAreaView),
+    StackedBottomsheet(classType: DetailSuaraPemilihBottomSheetView)
   ],
 )
 class App {}

lib/ui/views/splash_screen/splash_screen_view.dart

@@ -22,65 +22,67 @@ class SplashScreenView extends StatelessWidget {
       ) {
         return Scaffold(
           backgroundColor: warningColor,
-          body: Center(
+          body: SafeArea(
-            child: Column(
+            child: Center(
-              children: [
+              child: Column(
-                const Expanded(
+                children: [
-                  flex: 1,
+                  const Expanded(
-                  child: SizedBox(
+                    flex: 1,
-                    height: 100,
+                    child: SizedBox(
+                      height: 100,
+                    ),
                   ),
-                ),
+                  Image.asset(
-                Image.asset(
+                    'assets/logo.png',
-                  'assets/logo.png',
+                    width: 200,
-                  width: 200,
+                    height: 200,
-                  height: 200,
-                ),
-                const SizedBox(
-                  height: 10,
-                ),
-                Text(
-                  'SISTEM CEK SUARA',
-                  style: boldTextStyle.copyWith(
-                    // color: backgroundColor,
-                    fontSize: 20,
                   ),
-                  textAlign: TextAlign.center,
+                  const SizedBox(
-                ),
+                    height: 10,
-                Text(
-                  '(Survei App)',
-                  style: boldTextStyle.copyWith(
-                    // color: backgroundColor,
-                    fontStyle: FontStyle.italic,
                   ),
-                  textAlign: TextAlign.center,
+                  Text(
-                ),
+                    'SISTEM CEK SUARA',
-                const Expanded(child: SizedBox()),
+                    style: boldTextStyle.copyWith(
-                Text(
+                      // color: backgroundColor,
-                  'Created By',
+                      fontSize: 20,
-                  style: regularTextStyle.copyWith(
+                    ),
-                    fontSize: 12,
+                    textAlign: TextAlign.center,
                   ),
-                  textAlign: TextAlign.center,
+                  Text(
-                ),
+                    '(Survei App)',
-                Text(
+                    style: boldTextStyle.copyWith(
-                  'Kicap Karan',
+                      // color: backgroundColor,
-                  style: boldTextStyle.copyWith(
+                      fontStyle: FontStyle.italic,
-                    fontSize: 13,
+                    ),
-                    fontStyle: FontStyle.italic,
+                    textAlign: TextAlign.center,
                   ),
-                  textAlign: TextAlign.center,
+                  const Expanded(child: SizedBox()),
-                ),
+                  Text(
-                Text(
+                    'Created By',
-                  'www.kicap-karan.com',
+                    style: regularTextStyle.copyWith(
-                  style: boldTextStyle.copyWith(
+                      fontSize: 12,
-                    fontSize: 13,
+                    ),
+                    textAlign: TextAlign.center,
                   ),
-                ),
+                  Text(
-                const SizedBox(
+                    'Kicap Karan',
-                  height: 20,
+                    style: boldTextStyle.copyWith(
-                )
+                      fontSize: 13,
-              ],
+                      fontStyle: FontStyle.italic,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
+                  Text(
+                    'www.kicap-karan.com',
+                    style: boldTextStyle.copyWith(
+                      fontSize: 13,
+                    ),
+                  ),
+                  const SizedBox(
+                    height: 20,
+                  )
+                ],
+              ),
             ),
           ),
         );

lib/ui/views/tim_survei_index_tracking/halaman_history/detail_suara_pemilih_bottom_sheet/detail_suara_pemilih_bottom_sheet_view.dart

@@ -0,0 +1,157 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:stacked/stacked.dart';
+import 'package:stacked_services/stacked_services.dart';
+
+import '../../../../../app/themes/app_colors.dart';
+import '../../../../../app/themes/app_text.dart';
+import './detail_suara_pemilih_bottom_sheet_view_model.dart';
+
+class DetailSuaraPemilihBottomSheetView extends StatelessWidget {
+  final SheetRequest request;
+  final Function(SheetResponse)? completer;
+
+  const DetailSuaraPemilihBottomSheetView({
+    Key? key,
+    required this.request,
+    this.completer,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ViewModelBuilder<DetailSuaraPemilihBottomSheetViewModel>.reactive(
+      viewModelBuilder: () => DetailSuaraPemilihBottomSheetViewModel(),
+      onViewModelReady: (DetailSuaraPemilihBottomSheetViewModel model) async {
+        await model.init();
+      },
+      builder: (
+        BuildContext context,
+        DetailSuaraPemilihBottomSheetViewModel model,
+        Widget? child,
+      ) {
+        return SafeArea(
+          child: Container(
+            width: MediaQuery.of(context).size.width,
+            padding: const EdgeInsets.all(20),
+            alignment: Alignment.topCenter,
+            decoration: const BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(16.0),
+                topRight: Radius.circular(16.0),
+              ),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  request.title!,
+                  style: boldTextStyle.copyWith(
+                    fontSize: 16,
+                    color: fontColor,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Container(
+                  height: 100,
+                  width: 150,
+                  decoration: BoxDecoration(
+                    color: mainColor,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: GestureDetector(
+                    onTap: () {
+                      model.showImage(
+                        context,
+                        dotenv.env['url']! + request.data!.img!,
+                      );
+                    },
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.circular(10),
+                      child: Image.network(
+                        dotenv.env['url']! + request.data!.img!,
+                        fit: BoxFit.fill,
+                        errorBuilder: (context, error, stackTrace) {
+                          return const Center(
+                            child: Icon(
+                              Icons.error,
+                              color: backgroundColor,
+                              size: 50,
+                            ),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+                ),
+                _DetailChildWidget(
+                  title: 'Nama',
+                  value: request.data!.namaPemilih!,
+                ),
+                _DetailChildWidget(
+                  title: 'No KTP /\nNo HP',
+                  value: request.data!.nikNomorHp!,
+                ),
+                _DetailChildWidget(
+                  title: 'Tanggal/\nWaktu',
+                  value: request.data!.createdAt!,
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _DetailChildWidget extends StatelessWidget {
+  const _DetailChildWidget({
+    Key? key,
+    required this.title,
+    required this.value,
+  }) : super(key: key);
+  final String title;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 15),
+      child: Row(
+        children: [
+          Expanded(
+            flex: 3,
+            child: Text(
+              title,
+              style: boldTextStyle.copyWith(
+                fontSize: 16,
+                color: fontColor,
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 1,
+            child: Text(
+              ' : ',
+              style: boldTextStyle.copyWith(
+                fontSize: 16,
+                color: fontColor,
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 7,
+            child: Text(
+              value,
+              style: italicTextStyle.copyWith(
+                fontSize: 16,
+                color: fontColor,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/views/tim_survei_index_tracking/halaman_history/detail_suara_pemilih_bottom_sheet/detail_suara_pemilih_bottom_sheet_view_model.dart

@@ -0,0 +1,23 @@
+import 'package:easy_image_viewer/easy_image_viewer.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../../app/app.logger.dart';
+import '../../../../../app/core/custom_base_view_model.dart';
+
+class DetailSuaraPemilihBottomSheetViewModel extends CustomBaseViewModel {
+  final log = getLogger('DetailSuaraPemilihBottomSheetViewModel');
+  Future<void> init() async {}
+
+  showImage(BuildContext context, String? url) async {
+    log.i(url);
+    showImageViewer(
+      context,
+      Image.network(
+        url!,
+        fit: BoxFit.fill,
+      ).image,
+      swipeDismissible: true,
+      doubleTapZoomable: true,
+    );
+  }
+}

lib/ui/views/tim_survei_index_tracking/halaman_history/halaman_history_view.dart

@@ -113,7 +113,9 @@ class HalamanHistoryView extends StatelessWidget {
                                           color: mainColor,
                                         ),
                                         onPressed: () {
-                                          // model.showDetailCaleg(model.listCalegModel[i]);
+                                          model.showDetailPemilih(
+                                            model.listPemilih[i],
+                                          );
                                         },
                                       ),
                                     ),

lib/ui/views/tim_survei_index_tracking/halaman_history/halaman_history_view_model.dart

@@ -1,6 +1,7 @@
 import 'package:cek_suara_app/model/my_response.model.dart';
 import 'package:cek_suara_app/model/pemilih_model.dart';
 
+import '../../../../app/app.bottomsheets.dart';
 import '../../../../app/app.logger.dart';
 import '../../../../app/core/custom_base_view_model.dart';
 
@@ -37,4 +38,14 @@ class HalamanHistoryViewModel extends CustomBaseViewModel {
       setBusy(false);
     }
   }
+
+  showDetailPemilih(PemilihModel listPemilih) async {
+    await bottomSheetService.showCustomSheet(
+      variant: BottomSheetType.detailSuaraPemilihBottomSheetView,
+      title: 'Detail Suara Pemilih',
+      description: 'Detail Suara Pemilih',
+      // isScrollControlled: true,
+      data: listPemilih,
+    );
+  }
 }

lib/ui/views/tim_survei_index_tracking/halaman_survei/halaman_survei_view.dart

@@ -55,9 +55,12 @@ class HalamanSurveiView extends StatelessWidget {
                                   borderRadius: BorderRadius.circular(10),
                                 ),
                                 child: model.imageBytes != null
-                                    ? Image.memory(
+                                    ? ClipRRect(
-                                        model.imageBytes!,
+                                        borderRadius: BorderRadius.circular(10),
-                                        fit: BoxFit.fill,
+                                        child: Image.memory(
+                                          model.imageBytes!,
+                                          fit: BoxFit.fill,
+                                        ),
                                       )
                                     : const Icon(
                                         Icons.credit_card_rounded,

lib/ui/views/tim_survei_index_tracking/tim_survei_index_tracking_view.dart

@@ -24,45 +24,47 @@ class TimSurveiIndexTrackingView extends StatelessWidget {
         TimSurveiIndexTrackingViewModel model,
         Widget? child,
       ) {
-        return Scaffold(
+        return SafeArea(
-          extendBody: false,
+          child: Scaffold(
-          body: ExtendedNavigator(
+            extendBody: false,
-            router: TimSurveiIndexTrackingViewRouter(),
+            body: ExtendedNavigator(
-            navigatorKey: StackedService.nestedNavigationKey(5),
+              router: TimSurveiIndexTrackingViewRouter(),
-          ),
+              navigatorKey: StackedService.nestedNavigationKey(5),
-          bottomNavigationBar: StylishBottomBar(
+            ),
-            items: [
+            bottomNavigationBar: StylishBottomBar(
-              for (var item in model.bottomNavBarList)
+              items: [
-                BottomBarItem(
+                for (var item in model.bottomNavBarList)
-                  icon: Icon(item['icon'],
+                  BottomBarItem(
-                      color: model.currentIndex ==
+                    icon: Icon(item['icon'],
-                              model.bottomNavBarList.indexOf(item)
+                        color: model.currentIndex ==
-                          ? warningColor
+                                model.bottomNavBarList.indexOf(item)
-                          : fontColor),
+                            ? warningColor
-                  title: Text(
+                            : fontColor),
-                    item['name'],
+                    title: Text(
-                    style: regularTextStyle.copyWith(
+                      item['name'],
-                      color: model.currentIndex ==
+                      style: regularTextStyle.copyWith(
-                              model.bottomNavBarList.indexOf(item)
+                        color: model.currentIndex ==
-                          ? warningColor
+                                model.bottomNavBarList.indexOf(item)
-                          : fontColor,
+                            ? warningColor
+                            : fontColor,
+                      ),
+                      // textAlign: TextAlign.l,
                     ),
-                    // textAlign: TextAlign.l,
+                    backgroundColor: model.currentIndex ==
+                            model.bottomNavBarList.indexOf(item)
+                        ? fontColor
+                        : fontColor,
                   ),
-                  backgroundColor:
+              ],
-                      model.currentIndex == model.bottomNavBarList.indexOf(item)
+              currentIndex: model.currentIndex,
-                          ? fontColor
+              option: BubbleBarOptions(),
-                          : fontColor,
+              hasNotch: true,
-                ),
+              backgroundColor: warningColor,
-            ],
+              onTap: (value) {
-            currentIndex: model.currentIndex,
+                model.handleNavigation(value);
-            option: BubbleBarOptions(),
+              },
-            hasNotch: true,
+              // fabLocation: StylishBarFabLocation.center,
-            backgroundColor: warningColor,
+            ),
-            onTap: (value) {
-              model.handleNavigation(value);
-            },
-            // fabLocation: StylishBarFabLocation.center,
           ),
         );
       },

pubspec.lock

@@ -193,6 +193,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.3.3"
+  easy_image_viewer:
+    dependency: "direct main"
+    description:
+      name: easy_image_viewer
+      sha256: "8d11a4630e9beb7aacf043c98da2dd4b3bc3b47aa4073d2016ba696376161272"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
   fake_async:
     dependency: transitive
     description:

pubspec.yaml

@@ -52,6 +52,7 @@ dependencies:
   http_parser:
   intl:
   shared_preferences:
+  easy_image_viewer: 
 
 dev_dependencies:
   flutter_test: