added material dynamic color

This commit is contained in:
Piyush Suthar
2023-08-21 01:23:29 +05:30
parent e7b6a9d40f
commit 86684c5436
2 changed files with 51 additions and 93 deletions

View File

@ -1,4 +1,6 @@
import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:io' show Platform; import 'dart:io' show Platform;
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_nav_bar/google_nav_bar.dart'; import 'package:google_nav_bar/google_nav_bar.dart';
@ -34,45 +36,30 @@ class MyApp extends StatelessWidget {
const MyApp({super.key}); const MyApp({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return DynamicColorBuilder(
builder: (BuildContext context, Widget? child) { builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
return MediaQuery( return MaterialApp(
data: MediaQuery.of(context).copyWith( builder: (BuildContext context, Widget? child) {
textScaleFactor: 1.0, return MediaQuery(
), data: MediaQuery.of(context).copyWith(
child: child!, textScaleFactor: 1.0,
);
},
debugShowCheckedModeBanner: false,
title: 'Openlib',
theme: ThemeData(
primaryColor: Colors.white,
colorScheme: ColorScheme.light(
primary: Colors.white,
secondary: '#FB0101'.toColor(),
tertiary: Colors.black,
tertiaryContainer: '#F2F2F2'.toColor(),
),
textTheme: const TextTheme(
displayLarge: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 21,
), ),
displayMedium: TextStyle( child: child!,
fontSize: 13, );
fontWeight: FontWeight.bold, },
color: Colors.black, debugShowCheckedModeBanner: false,
overflow: TextOverflow.ellipsis, title: 'Openlib',
), theme: ThemeData(
),
fontFamily: GoogleFonts.nunito().fontFamily,
useMaterial3: true, useMaterial3: true,
textSelectionTheme: TextSelectionThemeData( colorScheme: lightDynamic,
selectionColor: '#FB0101'.toColor(), ),
selectionHandleColor: '#FB0101'.toColor())), darkTheme: ThemeData(
home: const HomePage(), useMaterial3: true,
); colorScheme: darkDynamic,
),
home: const HomePage(),
);
});
} }
} }
@ -94,67 +81,37 @@ class _HomePageState extends ConsumerState<HomePage> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final selectedIndex = ref.watch(selectedIndexProvider); final selectedIndex = ref.watch(selectedIndexProvider);
return Scaffold( return AnnotatedRegion<SystemUiOverlayStyle>(
appBar: AppBar( value: SystemUiOverlayStyle(
backgroundColor: Theme.of(context).colorScheme.primary, systemNavigationBarColor: ElevationOverlay.applySurfaceTint(
title: const Text("Openlib"), Theme.of(context).colorScheme.surface,
titleTextStyle: Theme.of(context).textTheme.displayLarge, Theme.of(context).colorScheme.surfaceTint,
), 3)),
body: _widgetOptions.elementAt(selectedIndex), child: Scaffold(
bottomNavigationBar: SafeArea( backgroundColor: Theme.of(context).colorScheme.background,
child: GNav( appBar: AppBar(
rippleColor: Colors.redAccent, leading:
backgroundColor: Colors.black, Icon(Icons.book, color: Theme.of(context).colorScheme.primary),
haptic: true, title: const Text(
tabBorderRadius: 50, "Openlib",
tabActiveBorder: Border.all( style: TextStyle(fontWeight: FontWeight.w600),
color: Theme.of(context).colorScheme.secondary,
), ),
tabMargin: const EdgeInsets.fromLTRB(13, 6, 13, 2.5), titleSpacing: 1,
curve: Curves.easeInOut, // tab animation curves ),
duration: const Duration(milliseconds: 150), body: _widgetOptions.elementAt(selectedIndex),
gap: 5, bottomNavigationBar: NavigationBar(
color: const Color.fromARGB(255, 255, 255, 255), destinations: const [
activeColor: const Color.fromARGB(255, 255, 255, 255), NavigationDestination(
iconSize: 21, // tab button icon size icon: Icon(Icons.trending_up), label: "Trending"),
tabBackgroundColor: Theme.of(context).colorScheme.secondary, NavigationDestination(icon: Icon(Icons.search), label: "Search"),
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 6.5), NavigationDestination(
tabs: const [ icon: Icon(Icons.collections_bookmark), label: "My Library"),
GButton(
icon: Icons.trending_up,
text: 'Trending',
iconColor: Colors.white,
textStyle: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.white,
fontSize: 13,
),
),
GButton(
icon: Icons.search,
text: 'Search',
iconColor: Colors.white,
textStyle: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.white,
fontSize: 13,
),
),
GButton(
icon: Icons.collections_bookmark,
text: 'My Library',
iconColor: Colors.white,
textStyle: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.white,
fontSize: 13,
),
),
], ],
selectedIndex: selectedIndex, selectedIndex: selectedIndex,
onTabChange: (index) async { onDestinationSelected: (index) async {
ref.read(selectedIndexProvider.notifier).state = index; ref.read(selectedIndexProvider.notifier).state = index;
}, },
labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
), ),
), ),
); );

View File

@ -56,6 +56,7 @@ dependencies:
# Use with the CupertinoIcons class for iOS style icons. # Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2 cupertino_icons: ^1.0.2
dev: ^1.0.0 dev: ^1.0.0
dynamic_color: ^1.6.6
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: