From 321e36bb43f737be3685153692a60c843f50d768 Mon Sep 17 00:00:00 2001 From: Simon Ding Date: Thu, 4 Jul 2024 23:33:07 +0800 Subject: [PATCH] add router and welcome page --- ui/lib/main.dart | 126 +++++++++++++++++------------------------- ui/lib/navdrawer.dart | 53 ++++++++++-------- ui/lib/weclome.dart | 71 ++++++++++++++++++++++++ ui/pubspec.lock | 21 +++++++ ui/pubspec.yaml | 1 + 5 files changed, 174 insertions(+), 98 deletions(-) create mode 100644 ui/lib/weclome.dart diff --git a/ui/lib/main.dart b/ui/lib/main.dart index f05d260..60b1dec 100644 --- a/ui/lib/main.dart +++ b/ui/lib/main.dart @@ -1,18 +1,65 @@ import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; import 'package:ui/navdrawer.dart'; import 'package:ui/search.dart'; +import 'package:ui/weclome.dart'; void main() { - runApp(const MyApp()); + runApp(MyApp()); } class MyApp extends StatelessWidget { - const MyApp({super.key}); + final GlobalKey _rootNavigatorKey = + GlobalKey(); + + MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { - return MaterialApp( + // GoRouter configuration + final _shellRoute = ShellRoute( + builder: (BuildContext context, GoRouterState state, Widget child) { + return Scaffold( + appBar: AppBar( + // TRY THIS: Try changing the color here to a specific color (to + // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar + // change color while the other colors stay the same. + backgroundColor: Theme.of(context).colorScheme.inversePrimary, + // 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: const Text("Polaris追剧"), + ), + body: Center( + // Center is a layout widget. It takes a single child and positions it + // in the middle of the parent. + child: Row(children: [ + NavDrawer(), + const VerticalDivider(thickness: 1, width: 1), + Expanded(child: child) + ]))); + }, + routes: [ + GoRoute( + path: '/', + builder: (context, state) => WelcomePage(), + ), + GoRoute( + path: "/search", + builder: (context, state) => const SearchPage(), + ) + ], + ); + + final _router = GoRouter( + navigatorKey: _rootNavigatorKey, + initialLocation: '/', + routes: [ + _shellRoute, + ], + ); + + return MaterialApp.router( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. @@ -30,79 +77,10 @@ class MyApp extends StatelessWidget { // // This works for code too, not just values: Most code changes can be // tested with just a hot reload. - colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), + colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent), useMaterial3: true, ), - home: const MyHomePage(title: 'Flutter Demo Home Page'), - ); - } -} - -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 - State createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - 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 - // 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( - // TRY THIS: Try changing the color here to a specific color (to - // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar - // change color while the other colors stay the same. - backgroundColor: Theme.of(context).colorScheme.inversePrimary, - // 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: Row( - children: [ - NavDrawer(), - const VerticalDivider(thickness: 1, width: 1), - SearchPage(), - ], - )), - floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', - child: const Icon(Icons.add), - ), // This trailing comma makes auto-formatting nicer for build methods. + routerConfig: _router, ); } } diff --git a/ui/lib/navdrawer.dart b/ui/lib/navdrawer.dart index b700e39..54a252d 100644 --- a/ui/lib/navdrawer.dart +++ b/ui/lib/navdrawer.dart @@ -1,12 +1,20 @@ import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; -class NavDrawer extends StatelessWidget { +class NavDrawer extends StatefulWidget { + @override + State createState() { + return _NavDrawerState(); + } +} + +class _NavDrawerState extends State { var _counter = 0; @override Widget build(BuildContext context) { return ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 300), + constraints: const BoxConstraints(maxWidth: 220), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, @@ -14,40 +22,37 @@ class NavDrawer extends StatelessWidget { Flexible( child: NavigationRail( selectedIndex: _counter, - onDestinationSelected: (value) {}, + onDestinationSelected: (value) { + setState(() { + _counter = value; + }); + if (value == 0) { + context.go('/'); + } else if (value == 1) { + context.go("/search"); + } + }, extended: MediaQuery.of(context).size.width >= 850, unselectedIconTheme: const IconThemeData(color: Colors.grey), destinations: const [ NavigationRailDestination( - icon: Icon(Icons.search), - label: Text('Buscar '), + icon: Icon(Icons.live_tv), + label: Text(' 电视剧'), ), NavigationRailDestination( - icon: Icon(Icons.engineering), - label: Text('Ingeniería '), + icon: Icon(Icons.download), + label: Text('活动'), ), NavigationRailDestination( - icon: Icon(Icons.business), - label: Text('Sociales '), + icon: Icon(Icons.settings), + label: Text('设置'), ), NavigationRailDestination( - icon: Icon(Icons.local_hospital), - label: Text('Salud'), - ), - NavigationRailDestination( - icon: Icon(Icons.school), - label: Text('Iniciales'), - ), - NavigationRailDestination( - icon: Icon(Icons.design_services), - label: Text('Talleres y Extracurriculares'), + icon: Icon(Icons.computer), + label: Text('系统'), ), ], - selectedLabelTextStyle: - TextStyle(color: Colors.lightBlue, fontSize: 20), - unselectedLabelTextStyle: - TextStyle(color: Colors.grey, fontSize: 18), - groupAlignment: -1, + //groupAlignment: -1, minWidth: 56, )) ])); diff --git a/ui/lib/weclome.dart b/ui/lib/weclome.dart new file mode 100644 index 0000000..9326faf --- /dev/null +++ b/ui/lib/weclome.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; +import 'package:ui/APIs.dart'; + +class WelcomePage extends StatefulWidget { + const WelcomePage({super.key}); + + @override + State createState() { + return _WeclomePageState(); + } +} + +class _WeclomePageState extends State { + var favList = List.empty(growable: true); + + @override + Widget build(BuildContext context) { + var cards = List.empty(growable: true); + for (final item in favList) { + var m = item as Map; + cards.add(Card( + margin: const EdgeInsets.all(4), + clipBehavior: Clip.hardEdge, + child: InkWell( + //splashColor: Colors.blue.withAlpha(30), + onTap: () { + //showDialog(context: context, builder: builder) + debugPrint('Card tapped.'); + }, + child: Row( + children: [ + Flexible( + child: SizedBox( + width: 150, + height: 200, + child: Image.network( + APIs.tmdbImgBaseUrl + m["poster_path"], + fit: BoxFit.contain, + ), + ), + ), + Flexible( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + m["name"], + style: const TextStyle( + fontSize: 14, fontWeight: FontWeight.bold), + ), + const Text(""), + Text(m["overview"]) + ], + ), + ) + ], + ), + ))); + } + + return Expanded( + child: RefreshIndicator( + onRefresh: _onRefresh, + child: Expanded( + child: ListView( + children: cards, + )))); + } + + Future _onRefresh() async {} +} diff --git a/ui/pubspec.lock b/ui/pubspec.lock index e39b666..0301249 100644 --- a/ui/pubspec.lock +++ b/ui/pubspec.lock @@ -83,6 +83,19 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_web_plugins: + dependency: transitive + description: flutter + source: sdk + version: "0.0.0" + go_router: + dependency: "direct main" + description: + name: go_router + sha256: cdae1b9c8bd7efadcef6112e81c903662ef2ce105cbd220a04bbb7c3425b5554 + url: "https://pub.flutter-io.cn" + source: hosted + version: "14.2.0" http_parser: dependency: transitive description: @@ -123,6 +136,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "4.0.0" + logging: + dependency: transitive + description: + name: logging + sha256: "623a88c9594aa774443aa3eb2d41807a48486b5613e67599fb4c41c0ad47c340" + url: "https://pub.flutter-io.cn" + source: hosted + version: "1.2.0" matcher: dependency: transitive description: diff --git a/ui/pubspec.yaml b/ui/pubspec.yaml index 9f8de78..0a865f2 100644 --- a/ui/pubspec.yaml +++ b/ui/pubspec.yaml @@ -36,6 +36,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.6 + go_router: ^14.2.0 dev_dependencies: flutter_test: