From 3114b7022148f643499b6a42a14fa22d28845aca Mon Sep 17 00:00:00 2001 From: Fadhlan Hasyim <81791118+fadhlanhasyim@users.noreply.github.com> Date: Tue, 6 Dec 2022 02:29:22 +0700 Subject: [PATCH] 1 authentication (#1) * Init authentication page * Add bottom navbar --- lib/main.dart | 58 ++----------- .../pages/authentication/_authentication.dart | 4 + .../pages/authentication/login_page.dart | 12 +++ .../pages/authentication/signup_page.dart | 10 +++ lib/views/pages/homepage/_homepage.dart | 5 ++ lib/views/pages/homepage/home_page.dart | 84 ++++++++++++++++++- lib/views/widgets/globals/_globals.dart | 4 + lib/views/widgets/globals/bottom_navbar.dart | 47 +++++++++++ pubspec.lock | 9 ++ pubspec.yaml | 1 + 10 files changed, 181 insertions(+), 53 deletions(-) create mode 100644 lib/views/pages/authentication/_authentication.dart create mode 100644 lib/views/pages/authentication/login_page.dart create mode 100644 lib/views/pages/authentication/signup_page.dart create mode 100644 lib/views/widgets/globals/bottom_navbar.dart diff --git a/lib/main.dart b/lib/main.dart index 008fa38..c8cc4c6 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:endterm_project/routes/routes_factory.dart'; import 'package:flutter/material.dart'; void main() { @@ -7,24 +8,19 @@ void main() { class MyApp extends StatelessWidget { const MyApp({super.key}); - // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', + onGenerateRoute: (settings) { + return MaterialPageRoute( + settings: settings, + builder: (_) => getScreenByName(settings.name!), + ); + }, 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'), ); } } @@ -32,15 +28,6 @@ class MyApp extends StatelessWidget { class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - final String title; @override @@ -52,47 +39,18 @@ class _MyHomePageState extends State { 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 - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. return Scaffold( 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), ), body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. child: Column( - // 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. - // - // Invoke "debug painting" (press "p" in the console, choose the - // "Toggle Debug Paint" action from the Flutter Inspector in Android - // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) - // to see the wireframe for each widget. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // 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, children: [ const Text( @@ -109,7 +67,7 @@ class _MyHomePageState extends State { onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), - ), // This trailing comma makes auto-formatting nicer for build methods. + ), ); } } diff --git a/lib/views/pages/authentication/_authentication.dart b/lib/views/pages/authentication/_authentication.dart new file mode 100644 index 0000000..49ce3db --- /dev/null +++ b/lib/views/pages/authentication/_authentication.dart @@ -0,0 +1,4 @@ +import 'package:flutter/material.dart'; + +part 'login_page.dart'; +part 'signup_page.dart'; \ No newline at end of file diff --git a/lib/views/pages/authentication/login_page.dart b/lib/views/pages/authentication/login_page.dart new file mode 100644 index 0000000..66b08da --- /dev/null +++ b/lib/views/pages/authentication/login_page.dart @@ -0,0 +1,12 @@ +part of '_authentication.dart'; + +class LoginPage extends StatelessWidget { + const LoginPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Text('data'), + ); + } +} \ No newline at end of file diff --git a/lib/views/pages/authentication/signup_page.dart b/lib/views/pages/authentication/signup_page.dart new file mode 100644 index 0000000..583b95f --- /dev/null +++ b/lib/views/pages/authentication/signup_page.dart @@ -0,0 +1,10 @@ +part of '_authentication.dart'; + +class SignUpPage extends StatelessWidget { + const SignUpPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold(); + } +} \ No newline at end of file diff --git a/lib/views/pages/homepage/_homepage.dart b/lib/views/pages/homepage/_homepage.dart index f5d7e4e..42fdd44 100644 --- a/lib/views/pages/homepage/_homepage.dart +++ b/lib/views/pages/homepage/_homepage.dart @@ -1,3 +1,8 @@ +import 'package:endterm_project/main.dart'; +import 'package:endterm_project/routes/routes_name.dart'; +import 'package:flashy_tab_bar2/flashy_tab_bar2.dart'; import 'package:flutter/material.dart'; +import '../../widgets/globals/_globals.dart'; + part 'home_page.dart'; \ No newline at end of file diff --git a/lib/views/pages/homepage/home_page.dart b/lib/views/pages/homepage/home_page.dart index 4f32922..60afa18 100644 --- a/lib/views/pages/homepage/home_page.dart +++ b/lib/views/pages/homepage/home_page.dart @@ -1,10 +1,88 @@ part of '_homepage.dart'; -class HomePage extends StatelessWidget { +class HomePage extends StatefulWidget { const HomePage({super.key}); + @override + State createState() => _HomePageState(); +} + +class _HomePageState extends State { + int _selectedIndex = 0; + static const List _pages = [ + MyHomePage( + title: 'test', + ), + MyHomePage( + title: 'title', + ), + ]; + + @override Widget build(BuildContext context) { - return Container(); + return Scaffold( + body: _pages.elementAt(_selectedIndex), + bottomNavigationBar: Container( + height: 65, + decoration: const BoxDecoration( + borderRadius: BorderRadius.only( + topRight: Radius.circular( + 15, + ), + topLeft: Radius.circular( + 15, + ), + ), + boxShadow: [ + BoxShadow( + blurRadius: 3, + spreadRadius: 3, + ), + ], + ), + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular( + 15, + ), + topRight: Radius.circular( + 15, + ), + ), + child: FlashyTabBar( + selectedIndex: _selectedIndex, + showElevation: true, + onItemSelected: (index) => (setState( + () { + _selectedIndex = index; + }, + )), + items: [ + FlashyTabBarItem( + icon: const Icon(Icons.library_books_outlined), + title: const Text('Baca'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.book), + title: const Text('Catat'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.child_care), + title: const Text('Diary'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.search), + title: const Text('Periksa'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.question_answer_outlined), + title: const Text('Tanya'), + ), + ], + ), + ), + ), + ); } -} \ No newline at end of file +} diff --git a/lib/views/widgets/globals/_globals.dart b/lib/views/widgets/globals/_globals.dart index e69de29..3c553e7 100644 --- a/lib/views/widgets/globals/_globals.dart +++ b/lib/views/widgets/globals/_globals.dart @@ -0,0 +1,4 @@ +import 'package:flashy_tab_bar2/flashy_tab_bar2.dart'; +import 'package:flutter/material.dart'; + +part 'bottom_navbar.dart'; \ No newline at end of file diff --git a/lib/views/widgets/globals/bottom_navbar.dart b/lib/views/widgets/globals/bottom_navbar.dart new file mode 100644 index 0000000..8971576 --- /dev/null +++ b/lib/views/widgets/globals/bottom_navbar.dart @@ -0,0 +1,47 @@ +part of '_globals.dart'; + +class BottomNavbar extends StatefulWidget { + BottomNavbar({super.key}); + + @override + State createState() => _BottomNavbarState(); +} + +class _BottomNavbarState extends State { + var _selectedIndex = 0; + + @override + Widget build(BuildContext context) { + return FlashyTabBar( + selectedIndex: _selectedIndex, + showElevation: true, + onItemSelected: (index) => (setState( + () { + _selectedIndex = index; + }, + )), + items: [ + FlashyTabBarItem( + icon: const Icon(Icons.library_books_outlined), + title: const Text('Baca'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.book), + title: const Text('Catat'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.child_care), + title: const Text('Diary'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.search), + title: const Text('Periksa'), + ), + FlashyTabBarItem( + icon: const Icon(Icons.question_answer_outlined), + title: const Text('Tanya'), + ), + ], + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 131c1ca..857d9b2 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -57,6 +57,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.3.1" + flashy_tab_bar2: + dependency: "direct main" + description: + name: flashy_tab_bar2 + sha256: "9e16a4c480c267adbc7f7124f848ff9ab32917565eff08d82e7555215de81598" + url: "https://pub.dev" + source: hosted + version: "0.0.5" flutter: dependency: "direct main" description: flutter @@ -186,3 +194,4 @@ packages: version: "2.1.4" sdks: dart: ">=2.19.0-374.0.dev <4.0.0" + flutter: ">=1.17.0" diff --git a/pubspec.yaml b/pubspec.yaml index f195c8e..ded0a24 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -35,6 +35,7 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 + flashy_tab_bar2: ^0.0.4 dev_dependencies: flutter_test: