Skip to content

Commit

Permalink
fix: use StatefulShellRoute to fix ui rerendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@simon-ding
simon-ding committed Nov 4, 2024
1 parent c28373b commit bb6da47
Showing 1 changed file with 78 additions and 99 deletions.
177 changes: 78 additions & 99 deletions ui/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,77 +49,81 @@ class _MyAppState extends ConsumerState<MyApp> {

@override
Widget build(BuildContext context) {
var padding = isSmallScreen(context) ? 5.0 : 20.0;
// GoRouter configuration
final shellRoute = ShellRoute(
builder: (BuildContext context, GoRouterState state, Widget child) {
final shellRoute = StatefulShellRoute.indexedStack(
builder: (BuildContext context, GoRouterState state,
StatefulNavigationShell navigationShell) {
return SelectionArea(
child: MainSkeleton(
body: Padding(
padding: EdgeInsets.only(
left: padding, right: padding, top: 5, bottom: 5),
child: child),
body: navigationShell,
),
);
},
routes: [
GoRoute(
path: "/",
redirect: (context, state) => WelcomePage.routeTv,
),
GoRoute(
path: WelcomePage.routeTv,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const WelcomePage()),
),
GoRoute(
path: WelcomePage.routeMoivie,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const WelcomePage()),
),
GoRoute(
path: TvDetailsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: TvDetailsPage(seriesId: state.pathParameters['id']!)),
),
GoRoute(
path: MovieDetailsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: MovieDetailsPage(id: state.pathParameters['id']!)),
),
GoRoute(
path: SearchPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: SearchPage(query: state.uri.queryParameters["query"])),
),
GoRoute(
path: SystemSettingsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: const SystemSettingsPage()),
),
GoRoute(
path: ActivityPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const ActivityPage()),
),
GoRoute(
path: SystemPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const SystemPage()),
)
branches: [
StatefulShellBranch(routes: [
GoRoute(
path: WelcomePage.routeTv,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const WelcomePage()),
),
GoRoute(
path: TvDetailsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: TvDetailsPage(seriesId: state.pathParameters['id']!)),
),
GoRoute(
path: SearchPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: SearchPage(query: state.uri.queryParameters["query"])),
),
]),
StatefulShellBranch(routes: [
GoRoute(
path: WelcomePage.routeMoivie,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const WelcomePage()),
),
GoRoute(
path: MovieDetailsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: MovieDetailsPage(id: state.pathParameters['id']!)),
),
]),
StatefulShellBranch(routes: [
GoRoute(
path: ActivityPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const ActivityPage()),
),
]),
StatefulShellBranch(routes: [
GoRoute(
path: SystemPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context, state: state, child: const SystemPage()),
)
]),
StatefulShellBranch(routes: [
GoRoute(
path: SystemSettingsPage.route,
pageBuilder: (context, state) => buildPageWithDefaultTransition(
context: context,
state: state,
child: const SystemSettingsPage()),
),
]),
],
);

final router = GoRouter(
navigatorKey: APIs.navigatorKey,
initialLocation: WelcomePage.routeTv,
routes: [
shellRoute,
GoRoute(
Expand Down Expand Up @@ -154,7 +158,7 @@ class _MyAppState extends ConsumerState<MyApp> {
}

class MainSkeleton extends StatefulWidget {
final Widget body;
final StatefulNavigationShell body;
const MainSkeleton({super.key, required this.body});

@override
Expand All @@ -164,23 +168,11 @@ class MainSkeleton extends StatefulWidget {
}

class _MainSkeletonState extends State<MainSkeleton> {
var _selectedTab;

@override
Widget build(BuildContext context) {
var uri = GoRouterState.of(context).uri.toString();
if (uri.contains(WelcomePage.routeTv)) {
_selectedTab = 0;
} else if (uri.contains(WelcomePage.routeMoivie)) {
_selectedTab = 1;
} else if (uri.contains(ActivityPage.route)) {
_selectedTab = 2;
} else if (uri.contains(SystemSettingsPage.route)) {
_selectedTab = 3;
} else if (uri.contains(SystemPage.route)) {
_selectedTab = 4;
}

var padding = isSmallScreen(context) ? 5.0 : 20.0;
return AdaptiveScaffold(
appBarBreakpoint: Breakpoints.standard,
appBar: AppBar(
Expand Down Expand Up @@ -258,23 +250,8 @@ class _MainSkeletonState extends State<MainSkeleton> {
],
),
useDrawer: false,
selectedIndex: _selectedTab,
onSelectedIndexChange: (int index) {
setState(() {
_selectedTab = index;
});
if (index == 0) {
context.go(WelcomePage.routeTv);
} else if (index == 1) {
context.go(WelcomePage.routeMoivie);
} else if (index == 2) {
context.go(ActivityPage.route);
} else if (index == 3) {
context.go(SystemSettingsPage.route);
} else if (index == 4) {
context.go(SystemPage.route);
}
},
selectedIndex: widget.body.currentIndex,
onSelectedIndexChange: (p0) => widget.body.goBranch(p0),
destinations: const <NavigationDestination>[
NavigationDestination(
icon: Icon(Icons.live_tv_outlined),
Expand Down Expand Up @@ -302,7 +279,11 @@ class _MainSkeletonState extends State<MainSkeleton> {
label: '系统',
),
],
body: (context) => SafeArea(child: widget.body),
body: (context) => SafeArea(
child: Padding(
padding: EdgeInsets.only(
left: padding, right: padding, top: 5, bottom: 5),
child: widget.body)),
// Define a default secondaryBody.
// Override the default secondaryBody during the smallBreakpoint to be
// empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
Expand All @@ -318,13 +299,11 @@ class _MainSkeletonState extends State<MainSkeleton> {
return AlertDialog(
title: Text("项目开发不易，给开发者加个鸡腿："),
content: SizedBox(
width: 350,
height: 400,
child:
Ink.image(
fit: BoxFit.fitWidth, image: AssetImage("assets/wechat.jpg"))

),
width: 350,
height: 400,
child: Ink.image(
fit: BoxFit.fitWidth,
image: AssetImage("assets/wechat.jpg"))),
);
},
);
Expand Down

0 comments on commit bb6da47

Please sign in to comment.