Weekly Assignment 4

weekly_assignment_4/.gitignore

@@ -19,7 +19,7 @@ migrate_working_dir/
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line
 # is commented out by default.
-#.vscode/
+.vscode/
 
 # Flutter/Dart/Pub related
 **/doc/api/

weekly_assignment_4/android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.6.10'
+    ext.kotlin_version = '1.7.10'
     repositories {
         google()
         mavenCentral()
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

weekly_assignment_4/lib/Navbar.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class Navbar extends StatefulWidget {
+  const Navbar({super.key, required this.title});
+
+  final Text title;
+
+  @override
+  State<StatefulWidget> createState() => _NavbarState();
+}
+
+class _NavbarState extends State<Navbar> {
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          title: widget.title,
+        ),
+        body: Column(children: [
+          Expanded(
+              child: Center(
+            child: IndexedStack(
+              index: _selectedIndex,
+              children: [Text('Home'), Text('Profile'), Text('Settings')],
+            ),
+          ))
+        ]),
+        bottomNavigationBar: BottomNavigationBar(
+          onTap: (int index) {
+            setState(() {
+              _selectedIndex = index;
+            });
+          },
+          currentIndex: _selectedIndex,
+          selectedItemColor: Colors.blue,
+          items: const <BottomNavigationBarItem>[
+            BottomNavigationBarItem(
+              icon: Icon(Icons.home),
+              label: 'Home',
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.person),
+              label: 'Profile',
+            ),
+            BottomNavigationBarItem(
+                icon: Icon(Icons.settings), label: 'Settings')
+          ],
+        ));
+  }
+}

weekly_assignment_4/lib/Navrail.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class Navrail extends StatefulWidget {
+  const Navrail({super.key, required this.title});
+
+  final Text title;
+
+  @override
+  State<StatefulWidget> createState() => _NavrailState();
+}
+
+class _NavrailState extends State<Navrail> {
+  int _selectedIndex = 0;
+  double groupAlignment = -1.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(title: widget.title),
+        body: Row(
+          children: <Widget>[
+            NavigationRail(
+              selectedIndex: _selectedIndex,
+              groupAlignment: groupAlignment,
+              labelType: NavigationRailLabelType.all,
+              onDestinationSelected: (int index) {
+                setState(() {
+                  _selectedIndex = index;
+                });
+              },
+              selectedLabelTextStyle: TextStyle(color: Colors.blue),
+              unselectedLabelTextStyle: TextStyle(color: Colors.black),
+              selectedIconTheme: const IconThemeData(color: Colors.blue),
+              useIndicator: false,
+              destinations: const <NavigationRailDestination>[
+                NavigationRailDestination(
+                    icon: Icon(Icons.favorite_border),
+                    label: Text('Favorite'),
+                    selectedIcon: Icon(Icons.favorite)),
+                NavigationRailDestination(
+                    icon: Icon(Icons.bookmark_outline),
+                    label: Text('Bookmark'),
+                    selectedIcon: Icon(Icons.bookmark)),
+                NavigationRailDestination(
+                    icon: Icon(Icons.star_border),
+                    label: Text('Star'),
+                    selectedIcon: Icon(Icons.star))
+              ],
+            ),
+            const VerticalDivider(thickness: 1, width: 1),
+            Expanded(
+                child: Center(
+                    child: IndexedStack(
+              index: _selectedIndex,
+              children: [Text('Favorite'), Text('Bookmark'), Text('Star')],
+            )))
+          ],
+        ));
+  }
+}

weekly_assignment_4/lib/main.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'Navbar.dart';
+import 'Navrail.dart';
 
 void main() {
   runApp(const MyApp());
@@ -11,25 +13,24 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
-        primarySwatch: Colors.blue,
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
+        title: 'Weekly Assignment 4',
+        theme: ThemeData(
+          // This is the theme of your application.
+          //
+          // Try running your application with "flutter run". You'll see the
+          // application has a blue toolbar. Then, without quitting the app, try
+          // changing the primarySwatch below to Colors.green and then invoke
+          // "hot reload" (press "r" in the console where you ran "flutter run",
+          // or simply save your changes to "hot reload" in a Flutter IDE).
+          // Notice that the counter didn't reset back to zero; the application
+          // is not restarted.
+          primarySwatch: Colors.blue,
+        ),
+        home: const MyHomePage(title: 'Weekly Assignment 4'));
   }
 }
 
-class MyHomePage extends StatefulWidget {
+class MyHomePage extends StatelessWidget {
   const MyHomePage({super.key, required this.title});
 
   // This widget is the home page of your application. It is stateful, meaning
@@ -43,24 +44,6 @@ class MyHomePage extends StatefulWidget {
 
   final String title;
 
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     // This method is rerun every time setState is called, for instance as done
@@ -73,12 +56,12 @@ class _MyHomePageState extends State<MyHomePage> {
       appBar: AppBar(
         // Here we take the value from the MyHomePage object that was created by
         // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
+        title: Text(title),
       ),
       body: Center(
         // Center is a layout widget. It takes a single child and positions it
         // in the middle of the parent.
-        child: Column(
+        child: Row(
           // Column is also a layout widget. It takes a list of children and
           // arranges them vertically. By default, it sizes itself to fit its
           // children horizontally, and tries to be as tall as its parent.
@@ -93,23 +76,42 @@ class _MyHomePageState extends State<MyHomePage> {
           // center the children vertically; the main axis here is the vertical
           // axis because Columns are vertical (the cross axis would be
           // horizontal).
-          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
+            TextButton(
+              onPressed: () {
+                Navigator.push(
+                    context,
+                    MaterialPageRoute(
+                        builder: (context) => const Navbar(
+                              title: Text('Bottom Navigation Bar Page'),
+                            )));
+              },
+              style: TextButton.styleFrom(
+                  backgroundColor: Colors.black,
+                  foregroundColor: Colors.blue[300],
+                  shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(5))),
+              child: const Text('Go to navigation bar page'),
             ),
+            TextButton(
+                onPressed: () {
+                  Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                          builder: (context) => const Navrail(
+                                title: Text('Navigation Rail Page'),
+                              )));
+                },
+                style: TextButton.styleFrom(
+                    backgroundColor: Colors.black,
+                    foregroundColor: Colors.blue[300],
+                    shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(5))),
+                child: const Text('Go to navigation rail page'))
           ],
         ),
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
     );
   }
 }