Merge pull request #50 from sayansil/landscape

Add support for landscape orientation screens

lib/constants.dart

@@ -32,6 +32,7 @@ const plotLineColors = [
 
 const defaultPadding = 30.0;
 const defaultSmallPadding = 20.0;
+const maskPadding = 30.0;
 
 // * Global parameters
 
@@ -52,6 +53,7 @@ enum DrawerItem { home, config, history, about, contribute, organism }
 
 const assetLoading = "assets/json/animation/loading.json";
 const assetEmpty = "assets/json/animation/empty.json";
+const assetHappyDog = "assets/json/animation/dog-happy.json";
 
 // * String constants
 
@@ -110,10 +112,12 @@ const navTitleHistory = "History";
 const navTitleAbout = "About";
 const navTitleContribute = "Contribute";
 
-const screenTitleHome = "Ecosystem Simulator";
+const screenTitleHome = "Home";
 const screenTitleSpecies = "Add species";
 const screenTitleHistory = "History";
 const screenTitleAbout = "About";
+const screenTitleProgress = "Simulation";
+const screenTitleReport = "Simulation Report";
 
 const footerTitleText = "Made with ❤️";
 const stayTunedText = "Keep an eye on this space...";

lib/screens/about/about_screen.dart

@@ -2,7 +2,7 @@ import 'package:ecosystem/constants.dart';
 import 'package:flutter/material.dart';
 import 'package:ecosystem/screens/common/navdrawer.dart';
 import 'package:ecosystem/screens/common/navappbar.dart';
-import 'components/body.dart';
+import 'components/body/driver.dart';
 
 class AboutScreen extends StatelessWidget {
   const AboutScreen({super.key});
@@ -11,7 +11,7 @@ class AboutScreen extends StatelessWidget {
   Widget build(BuildContext context) => Scaffold(
         resizeToAvoidBottomInset: false,
         drawer: const NavDrawer(currentItem: DrawerItem.about),
-        appBar: buildNavAppBar(context),
+        appBar: buildNavAppBar(context, screenTitleAbout),
         body: const AboutBody(),
       );
 }

lib/screens/about/components/body/driver.dart

@@ -0,0 +1,41 @@
+import 'package:ecosystem/screens/about/components/body/portrait.dart';
+import 'package:ecosystem/screens/about/components/body/landscape.dart';
+
+import 'package:flutter/material.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+
+class AboutBody extends StatefulWidget {
+  const AboutBody({super.key});
+
+  @override
+  State<AboutBody> createState() => AboutBodyState();
+}
+
+class AboutBodyState extends State<AboutBody> {
+  String version = "";
+
+  Future<void> loadVersion() async {
+    PackageInfo packageInfo = await PackageInfo.fromPlatform();
+
+    setState(() {
+      version = packageInfo.version;
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    loadVersion();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return OrientationBuilder(
+        builder: (BuildContext context, Orientation orientation) {
+          return orientation == Orientation.portrait ?
+          getPortraitBody(this) :
+          getLandscapeBody(this);
+        }
+    );
+  }
+}

lib/screens/about/components/body/landscape.dart

@@ -0,0 +1,97 @@
+
+
+import 'package:flutter/material.dart';
+
+import 'package:ecosystem/constants.dart';
+import 'package:ecosystem/screens/common/credits.dart';
+import 'package:ecosystem/screens/common/header.dart';
+import 'package:ecosystem/styles/widget_styles.dart';
+import 'driver.dart';
+
+Widget getLandscapeBody(AboutBodyState state) {
+  Size size = MediaQuery.of(state.context).size;
+
+  return Container(
+    constraints: const BoxConstraints.expand(),
+    child: Stack(
+      children: <Widget>[
+        // * Header background
+        getScreenHeaderBackground(size),
+
+        ShaderMask(
+            shaderCallback: (Rect bounds) {
+              return LinearGradient(
+                end: Alignment.topCenter,
+                begin: Alignment.bottomCenter,
+                colors: [Colors.white, Colors.white.withOpacity(0.05)],
+                stops: const [0.95, 1],
+                tileMode: TileMode.mirror,
+              ).createShader(bounds);
+            },
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.only(
+                left: defaultPadding,
+                right: defaultPadding,
+              ),
+              physics: const BouncingScrollPhysics(),
+              child: Column(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  children: [
+                    const SizedBox(
+                      height: maskPadding,
+                    ),
+
+                    Container(
+                      width: double.infinity,
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: defaultPadding,
+                        vertical: defaultPadding,
+                      ),
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        boxShadow: defaultCardShadow,
+                        borderRadius: BorderRadius.circular(20),
+                      ),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          const Text(
+                            aboutText,
+                            style: subHeaderStyle,
+                          ),
+
+                          const SizedBox(height: 100),
+
+                          Visibility(
+                            visible: state.version.isNotEmpty,
+                            child: Container(
+                              padding: const EdgeInsets.symmetric(
+                                vertical: defaultPadding / 4,
+                                horizontal: defaultPadding / 2,
+                              ),
+                              decoration: BoxDecoration(
+                                color: colorPrimary,
+                                borderRadius: BorderRadius.circular(20),
+                              ),
+                              child: Text(
+                                "version: ${state.version}",
+                                style: subHeaderBrightStyle,
+                              ),
+                            ),
+                          ),
+
+                          getFooter(),
+                        ],
+                      ),
+                    ),
+
+                    const SizedBox(height: 100),
+                  ]
+              ),
+            )
+        ),
+      ],
+    ),
+  );
+}