Separate content to multiple screens (#23)

MJSSA · Dec 29, 2022 · 510bb27 · 510bb27
1 parent 1bd69f9
commit 510bb27
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git a/mjssa_digital_library/lib/main.dart b/mjssa_digital_library/lib/main.dart
@@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:mjssa_digital_library/screens/home_screen.dart';
+import 'package:mjssa_digital_library/screens/more_screen.dart';
+import 'package:mjssa_digital_library/screens/search_screen.dart';
 
 void main() {
   runApp(const MyApp());
@@ -56,18 +59,9 @@ class _MyHomePageState extends State<MyHomePage> {
   static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white);
 
   static const List<Widget> _widgetOptions = <Widget>[
-    Center(child: Text(
-      'Home',
-      style: optionStyle,
-    )),
-    Center(child: Text(
-      'Search',
-      style: optionStyle,
-    )),
-    Center(child: Text(
-      'More',
-      style: optionStyle,
-    )),
+    HomeScreen(),
+    SearchScreen(),
+    MoreScreen(),
   ];
 
   // void _incrementCounter() {
@@ -143,26 +137,30 @@ class _MyHomePageState extends State<MyHomePage> {
         child: _widgetOptions.elementAt(_selectedIndex),
       ),
       bottomNavigationBar: BottomNavigationBar(
+        type: BottomNavigationBarType.shifting,
         items: const <BottomNavigationBarItem>[
           BottomNavigationBarItem(
             icon: Icon(Icons.home),
             label: 'Home',
+            backgroundColor: Colors.black,
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.search),
             label: 'Search',
+            backgroundColor: Colors.black,
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.newspaper),
             label: 'More',
+            backgroundColor: Colors.black,
           ),
         ],
         currentIndex: _selectedIndex,
         onTap: _onItemTapped,
         backgroundColor: Colors.black,
-        selectedItemColor: Colors.white,
+        selectedItemColor: Colors.blue,
         unselectedItemColor: Colors.grey,
-        // elevation: 8,
+        elevation: 0,
       ),
       // floatingActionButton: FloatingActionButton(
       //   onPressed: _incrementCounter,

diff --git a/mjssa_digital_library/lib/screens/home_screen.dart b/mjssa_digital_library/lib/screens/home_screen.dart
@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+class HomeScreen extends StatelessWidget {
+  const HomeScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Text(
+        'Home',
+        style: TextStyle(
+          fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white),
+    ));
+  }
+}
diff --git a/mjssa_digital_library/lib/screens/more_screen.dart b/mjssa_digital_library/lib/screens/more_screen.dart
@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+class MoreScreen extends StatelessWidget {
+  const MoreScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Text(
+        'More',
+        style: TextStyle(
+          fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white),
+    ));
+  }
+}
diff --git a/mjssa_digital_library/lib/screens/search_screen.dart b/mjssa_digital_library/lib/screens/search_screen.dart
@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+class SearchScreen extends StatelessWidget {
+  const SearchScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Text(
+        'Search',
+        style: TextStyle(
+          fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white),
+    ));
+  }
+}