Misc, update layout, nice main page + hero to configuration detail

lib/Components/CustomAppBar.dart

@@ -4,6 +4,7 @@ import 'package:mymuseum_visitapp/Components/AdminPopup.dart';
 import 'package:mymuseum_visitapp/Components/LanguageSelection.dart';
 import 'package:mymuseum_visitapp/Models/visitContext.dart';
 import 'package:mymuseum_visitapp/Screens/Home/home.dart';
+import 'package:mymuseum_visitapp/Screens/Home/home_3.0.dart';
 import 'package:mymuseum_visitapp/app_context.dart';
 import 'package:mymuseum_visitapp/constants.dart';
 import 'package:provider/provider.dart';
@@ -77,7 +78,7 @@ class _CustomAppBarState extends State<CustomAppBar> {
               visitAppContext.isScanningBeacons = false;
               //Navigator.of(context).pop();
               Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
-                builder: (context) => const HomePage(),
+                builder: (context) => const HomePage3(),
               ),(route) => false);
             });
           }
@@ -96,14 +97,14 @@ class _CustomAppBarState extends State<CustomAppBar> {
                   child: visitAppContext.isMaximizeTextSize ? const Icon(Icons.text_fields, color: Colors.white) : const Icon(Icons.format_size, color: Colors.white)
                 ),
             ),
-         Padding(
+         /*Padding(
           padding: const EdgeInsets.only(right: 5.0),
           child: SizedBox(
             width: 50,
             height: 50,
             child: LanguageSelection()
           )
-        ),
+        ),*/
       ],
       flexibleSpace: Container(
         decoration: const BoxDecoration(

lib/Components/LanguageSelection.dart

@@ -48,9 +48,10 @@ class _LanguageSelection extends State<LanguageSelection> with TickerProviderSta
     }
 
     return PopupMenuButton(
+        color: kMainColor.withValues(alpha: 0.65),
         icon: Container(
-          height: size.height *0.07,
+          height: size.height *0.08,
-          width: size.width *0.07,
+          width: size.width *0.08,
           decoration: flagDecoration(selectedLanguage!),
         ),
         itemBuilder: (context){

lib/Screens/Home/configurations_list.dart

@@ -79,7 +79,7 @@ class _ConfigurationsListState extends State<ConfigurationsList> {
 
                   Navigator.of(context).pushReplacement(MaterialPageRoute(
                     builder: (context) =>
-                        VisitPage(configurationId: configurations[index].id!, isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
+                        VisitPage(configuration: configurations[index], isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
                   ));
 
                 }
@@ -110,7 +110,7 @@ class _ConfigurationsListState extends State<ConfigurationsList> {
 
                     Navigator.of(context).pushReplacement(MaterialPageRoute(
                       builder: (context) =>
-                          VisitPage(configurationId: configurations[index].id!, isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
+                          VisitPage(configuration: configurations[index], isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
                     ));
                   }
                 }

lib/Screens/Home/home_3.0.dart

@@ -8,6 +8,7 @@ import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
 import 'package:manager_api_new/api.dart';
 import 'package:mymuseum_visitapp/Components/CustomAppBar.dart';
+import 'package:mymuseum_visitapp/Components/LanguageSelection.dart';
 import 'package:mymuseum_visitapp/Components/ScannerBouton.dart';
 import 'package:mymuseum_visitapp/Components/loading_common.dart';
 import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
@@ -17,6 +18,7 @@ import 'package:mymuseum_visitapp/Helpers/requirement_state_controller.dart';
 import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
 import 'package:mymuseum_visitapp/Models/beaconSection.dart';
 import 'package:mymuseum_visitapp/Models/visitContext.dart';
+import 'package:mymuseum_visitapp/Screens/Visit/visit.dart';
 import 'package:mymuseum_visitapp/Services/apiService.dart';
 import 'package:mymuseum_visitapp/Services/downloadConfiguration.dart';
 import 'package:mymuseum_visitapp/app_context.dart';
@@ -50,6 +52,12 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
     Colors.red,
   ];
 
+  @override
+  void initState() {
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
@@ -57,6 +65,7 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
     visitAppContext = appContext.getContext();
 
     return Scaffold(
+      extendBody: true,
       body: FutureBuilder(
         future: getConfigurationsCall(visitAppContext.clientAPI, appContext),
         builder: (context, AsyncSnapshot<dynamic> snapshot) {
@@ -67,16 +76,26 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
 
             return Stack(
               children: [
-                SizedBox(
+                Container(
+                  decoration: const BoxDecoration(
+                    gradient: LinearGradient(
+                      colors: [Colors.grey, Colors.lightGreen],
+                      begin: Alignment.topLeft,
+                      end: Alignment.bottomRight,
+                    ),
+                  ),
+                ),
+                /*SizedBox(
                     height: size.height * 0.35,
                     width: size.width,
                     child: Image.network(
                       configurations[2].imageSource!,
                       fit: BoxFit.cover,
                     )
-                ),
+                ),*/
-                Padding(
+                SafeArea(
-                  padding: EdgeInsets.only(top: size.height * 0.15),
+                  top: false,
+                  bottom: false,
                   child: CustomScrollView(
                     slivers: [
                       /*SliverAppBar(
@@ -94,33 +113,60 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
                                 ),*/
                       SliverAppBar(
                         backgroundColor: Colors.transparent,
-                        pinned: true,
+                        pinned: false,
-                        expandedHeight: 225.0,
+                        expandedHeight: 235.0,
-                        flexibleSpace: Container() /*FlexibleSpaceBar(
+                        flexibleSpace: FlexibleSpaceBar(
-                          collapseMode: CollapseMode.none, // 👈 Optionnel pour éviter le fade
+                          collapseMode: CollapseMode.pin, // 👈 Optionnel pour éviter le fade
                           centerTitle: true,
-                          background: Image.network(
+                          background: Container(
-                            configurations[2].imageSource!,
+                            padding: const EdgeInsets.only(bottom: 25.0),
+                            decoration: const BoxDecoration(
+                              borderRadius: BorderRadius.only(
+                                bottomLeft: Radius.circular(25),
+                                bottomRight: Radius.circular(25),
+                              ),
+                              boxShadow: [
+                                BoxShadow(
+                                  color: Colors.black26,
+                                  blurRadius: 3.5,
+                                  offset: Offset(0, -20),
+                                ),
+                              ],
+                            ),
+                            child: ClipRRect(
+                              borderRadius: const BorderRadius.only(
+                                bottomLeft: Radius.circular(25),
+                                bottomRight: Radius.circular(25),
+                              ),
+                              child: Stack(
+                                fit: StackFit.expand,
+                                children: [
+                                  Opacity(
+                                    opacity: 0.85,
+                                    child: Image.network(
+                                      configurations[1].imageSource!,
                                       fit: BoxFit.cover,
                                     ),
-                          title: InkWell(
-                            onLongPress: () {
-                              showDialog(
-                                  builder: (BuildContext context) => const AlertDialog(
-                                    shape: RoundedRectangleBorder(
-                                        borderRadius: BorderRadius.all(Radius.circular(10.0))
                                   ),
-                                    //content: AdminPopup(),
+                                  Positioned(
-                                    contentPadding: EdgeInsets.zero,
+                                    top: 35,
-                                  ), context: context
+                                    right: 10,
-                              );
-                            },
                                     child: SizedBox(
-                              width: /*widget.isHomeButton ?*/ size.width * 0.8 /*: null*/,
+                                      width: 75,
-                              height: 60,
+                                      height: 75,
+                                      child: LanguageSelection()
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ),
+                          title: SizedBox(
+                            width: /*widget.isHomeButton ?*/ size.width * 1.0 /*: null*/,
+                            height: 120,
                             child: Center(
                               child: HtmlWidget(
-                                  "Carnaval de Marche",
+                                configurations[0].title!.firstWhere((t) => t.language == "FR").value!,
                                 textStyle: const TextStyle(color: Colors.white, fontFamily: 'Roboto', fontSize: 20),
                                 customStylesBuilder: (element)
                                 {
@@ -129,11 +175,10 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
                               ),
                             ),
                           ),
-                          ),
+                        ), // plus de FlexibleSpaceBar
-                        ),*/ // plus de FlexibleSpaceBar
                       ),
                       SliverPadding(
-                        padding: const EdgeInsets.all(8),
+                        padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0, bottom: 20.0),
                         sliver: SliverMasonryGrid.count(
                           crossAxisCount: 2,
                           mainAxisSpacing: 12,
@@ -141,16 +186,54 @@ class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
                           childCount: configurations.length,
                           itemBuilder: (context, index) {
                             //return buildTile(configurations[index]);
-                            return Container(
+                            String cleanedTitle = configurations[index].title!.firstWhere((t) => t.language == "FR").value!.replaceAll('\n', ' ').replaceAll('<br>', ' ');
+
+                            return InkWell(
+                              onTap: () {
+                                // Update context (it's in visit now, hero..
+
+
+                                Navigator.of(context).push(MaterialPageRoute(
+                                  builder: (context) =>
+                                      VisitPage(configuration: configurations[index], isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
+                                ));
+                              },
+                              child: Hero(
+                                tag: configurations[index].id!,
+                                child: Container(
                                   height: 200 + (index % 3) * 55,
                                   decoration: BoxDecoration(
                                     color: colors[index % colors.length],
                                     borderRadius: BorderRadius.circular(16),
+                                    boxShadow: const [
+                                      BoxShadow(
+                                        color: kMainGrey,
+                                        spreadRadius: 0.5,
+                                        blurRadius: 5,
+                                        offset: Offset(0, 1), // changes position of shadow
+                                      ),
+                                    ],
+                                    image: configurations[index].imageSource != null ? DecorationImage(
+                                      fit: BoxFit.cover,
+                                      opacity: 0.5,
+                                      image: NetworkImage(
+                                        configurations[index].imageSource!,
+                                      ),
+                                    ): null,
                                   ),
                                   child: Center(
-                                child: Text(
+                                    child: Padding(
-                                  'Bloc ${index + 1}',
+                                      padding: const EdgeInsets.all(8.0),
-                                  style: const TextStyle(color: Colors.white, fontSize: 18),
+                                      child: HtmlWidget(
+                                        cleanedTitle,
+                                        textStyle: const TextStyle(color: Colors.white, fontFamily: 'Roboto', fontSize: 20),
+                                        customStylesBuilder: (element)
+                                        {
+                                          return {'text-align': 'center', 'font-family': "Roboto", '-webkit-line-clamp': "2"};
+                                        },
+                                      ),
+                                    ),
+                                  ),
                                 ),
                               ),
                             );

lib/Screens/Visit/components/body.dart

@@ -8,6 +8,7 @@ import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
 import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
 import 'package:mymuseum_visitapp/Models/visitContext.dart';
 import 'package:mymuseum_visitapp/Screens/Article/article_page.dart';
+import 'package:mymuseum_visitapp/Screens/Home/home_3.0.dart';
 import 'package:mymuseum_visitapp/Screens/Quizz/quizz_page.dart';
 import 'package:mymuseum_visitapp/Screens/section_page.dart';
 import 'package:mymuseum_visitapp/Services/apiService.dart';
@@ -18,9 +19,9 @@ import 'package:provider/provider.dart';
 import 'section_card.dart';
 
 class Body extends StatefulWidget {
-  const Body({Key? key, required this.configurationId}) : super(key: key);
+  const Body({Key? key, required this.configuration}) : super(key: key);
 
-  final String? configurationId;
+  final ConfigurationDTO configuration;
 
   @override
   State<Body> createState() => _BodyState();
@@ -35,12 +36,75 @@ class _BodyState extends State<Body> {
   @override
   Widget build(BuildContext context) {
     final appContext = Provider.of<AppContext>(context);
+    VisitAppContext visitAppContext = appContext.getContext();
     Size size = MediaQuery.of(context).size;
 
     return SafeArea(
       bottom: false,
-      child: Column(
+      top: false,
+      child: Stack(
+        children: [
+          Hero(
+            tag: widget.configuration.id!,
+            child: Container(
+              height: size.height * 0.28,
+              decoration: BoxDecoration(
+                boxShadow: const [
+                  BoxShadow(
+                    color: kMainGrey,
+                    spreadRadius: 0.5,
+                    blurRadius: 5,
+                    offset: Offset(0, 1), // changes position of shadow
+                  ),
+                ],
+                image: widget.configuration.imageSource != null ? DecorationImage(
+                  fit: BoxFit.cover,
+                  opacity: 0.65,
+                  image: NetworkImage(
+                    widget.configuration.imageSource!,
+                  ),
+                ): null,
+              ),
+            ),
+          ),
+          Column(
             children: <Widget>[
+              SizedBox(
+                height: size.height * 0.11,
+                width: size.width,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    Positioned(
+                      top: 35,
+                      left: 10,
+                      child: SizedBox(
+                          width: 50,
+                          height: 50,
+                          child: InkWell(
+                            onTap: () {
+                              setState(() {
+                                visitAppContext.configuration = null;
+                                visitAppContext.isScanningBeacons = false;
+                                Navigator.of(context).pop();
+                                /*Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
+                                  builder: (context) => const HomePage3(),
+                                ),(route) => false);*/
+                              });
+                            },
+                            child: Container(
+                              decoration: const BoxDecoration(
+                                color: kMainColor,
+                                shape: BoxShape.circle,
+                              ),
+                              child: const Icon(Icons.chevron_left, size: 28, color: Colors.white)
+                            ),
+                          )
+                      ),
+                    ),
+                  ],
+                ),
+              ),
               Row(
                 children: [
                   SearchBox(onChanged: (value) {
@@ -91,7 +155,7 @@ class _BodyState extends State<Body> {
                             padding: const EdgeInsets.only(bottom: 0),
                             child: RefreshIndicator(
                               onRefresh: () async {
-                            if(!(appContext.getContext() as VisitAppContext).configuration!.isOffline!) {
+                                if(!widget.configuration.isOffline!) {
                                   // Force refresh if online
                                   setState(() {});
                                 } },
@@ -133,12 +197,14 @@ class _BodyState extends State<Body> {
               ),
             ],
           ),
+        ],
+      ),
     );
   }
 
   getSections(AppContext appContext) async {
-    VisitAppContext visitAppContext = (appContext.getContext() as VisitAppContext);
+    VisitAppContext visitAppContext = appContext.getContext();
-    if(visitAppContext.configuration!.isOffline!)
+    if(widget.configuration.isOffline!)
     {
       // OFFLINE
       sections = List<SectionDTO>.from(await DatabaseHelper.instance.getData(DatabaseTableType.sections));
@@ -146,15 +212,15 @@ class _BodyState extends State<Body> {
     else
     {
       // ONLINE
-      List<SectionDTO>? sectionsDownloaded = await ApiService.getAllSections(visitAppContext.clientAPI, visitAppContext.configuration!.id!);
+      List<SectionDTO>? sectionsDownloaded = await ApiService.getAllSections(visitAppContext.clientAPI, widget.configuration.id!);
       //print(sectionsDownloaded);
       if(sectionsDownloaded!.isNotEmpty) {
-        sections = sectionsDownloaded.where((s) => s.type == SectionType.Article || s.type == SectionType.Quiz).toList(); // TODO Support more than Article and Quizz section type
+        sections = sectionsDownloaded.toList();
         //print(sections);
       }
     }
 
-    sections = sections.where((s) => s.configurationId == widget.configurationId).toList();
+    sections = sections.where((s) => s.configurationId == widget.configuration.id!).toList();
     sections.sort((a,b) => a.order!.compareTo(b.order!));
     sectionsToDisplay = sections;
 

lib/Screens/Visit/components/section_card.dart

@@ -33,7 +33,7 @@ class SectionCard extends StatelessWidget {
     Size size = MediaQuery.of(context).size;
     final appContext = Provider.of<AppContext>(context);
     VisitAppContext visitAppContext = appContext.getContext();
-    bool isOffline = (appContext.getContext() as VisitAppContext).configuration!.isOffline!;
+    bool isOffline = (appContext.getContext() as VisitAppContext).configuration?.isOffline! ?? false;
 
     return Container(
       margin: EdgeInsets.only(
@@ -69,7 +69,7 @@ class SectionCard extends StatelessWidget {
                 ),
               ),
             ),
-            if(sectionDTO.imageId != null)
+            if(sectionDTO.imageId != null && (appContext.getContext() as VisitAppContext).configuration != null)
               // section main image
               Positioned(
                 top: kDefaultPadding +4.0,

lib/Screens/Visit/visit.dart

@@ -25,9 +25,9 @@ import 'package:provider/provider.dart';
 import 'components/body.dart';
 
 class VisitPage extends StatefulWidget {
-  const VisitPage({Key? key, required this.configurationId, required this.isAlreadyAllowed}) : super(key: key);
+  const VisitPage({Key? key,required this.configuration, required this.isAlreadyAllowed}) : super(key: key);
 
-  final String configurationId;
+  final ConfigurationDTO configuration;
   final bool isAlreadyAllowed;
 
   @override
@@ -35,7 +35,7 @@ class VisitPage extends StatefulWidget {
 }
 
 class _VisitPageState extends State<VisitPage> with WidgetsBindingObserver {
-  ConfigurationDTO? configuration;
+  //ConfigurationDTO? configuration;
 
   int timeBetweenBeaconPopUp = 20000; // 20 sec
   int meterToBeacon = 100; // 15 meters
@@ -73,6 +73,10 @@ class _VisitPageState extends State<VisitPage> with WidgetsBindingObserver {
     if(widget.isAlreadyAllowed) {
       listeningState();
     }
+
+    /*WidgetsBinding.instance.addPostFrameCallback((_) {
+      final appContext = Provider.of<AppContext>(context, listen: false);
+    });*/
     //listeningState();
   }
 
@@ -320,7 +324,7 @@ class _VisitPageState extends State<VisitPage> with WidgetsBindingObserver {
   Widget build(BuildContext context) {
     final appContext = Provider.of<AppContext>(context);
     VisitAppContext visitAppContext = appContext.getContext();
-    configuration = visitAppContext.configuration;
+    //configuration = visitAppContext.configuration;
 
     listener = controller.startStream.listen((flag) async {
       print(flag);
@@ -331,17 +335,15 @@ class _VisitPageState extends State<VisitPage> with WidgetsBindingObserver {
       }
     });
 
-
-
     return PopScope(
       canPop: false,
       child: Scaffold(
-        appBar: CustomAppBar(
+        /*appBar: CustomAppBar(
           title: TranslationHelper.get(configuration!.title, visitAppContext),
           isHomeButton: true,
-        ),
+        ),*/
         backgroundColor: kBackgroundGrey,
-        body: Body(configurationId: configuration!.id), // TODO handle error..
+        body: Body(configuration: widget.configuration),
         floatingActionButton: Stack(
           children: [
             visitAppContext.beaconSections != null && visitAppContext.beaconSections!.where((bs) => bs!.configurationId == visitAppContext.configuration!.id).isNotEmpty ? Align(

lib/main.dart

@@ -72,6 +72,12 @@ void main()  async {
   //);
   //AudioPlayer.global.setGlobalAudioContext(audioContext);
 
+  WidgetsFlutterBinding.ensureInitialized();
+  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
+    systemNavigationBarColor: Colors.transparent, // ← important
+    statusBarColor: Colors.transparent,
+  ));
+
   runApp(myApp);
 }