MaxYablochkin
commented
1 year ago import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return DynamicColorBuilder(
builder: (lightDynamic, darkDynamic) {
return MaterialApp(
title: 'Test AppBar',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
brightness: Brightness.light,
colorScheme: lightDynamic,
),
darkTheme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorScheme: darkDynamic,
),
home: IterableList(),
);
},
);
}
}
class IterableList extends StatefulWidget {
const IterableList({super.key});
@override
State<IterableList> createState() => _IterableListState();
}
class _IterableListState extends State<IterableList> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Small TopAppBar'),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
],
shape: Border.all(color: Colors.transparent),
toolbarHeight: 64,
),
drawer: MyNavigationDrawer(),
body: ListView.builder(
itemCount: 76,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.only(left: 15, bottom: 6),
child: Text(index.toString(), style: TextStyle(fontSize: 16)),
);
},
),
);
}
}
class MyNavigationDrawer extends StatefulWidget {
const MyNavigationDrawer({super.key});
@override
State<MyNavigationDrawer> createState() => _MyNavigationDrawerState();
}
class _MyNavigationDrawerState extends State<MyNavigationDrawer> {
int selectedIndex = 0;
void onDestinationSelected(int index) {
setState(() {
selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return NavigationDrawer(
selectedIndex: selectedIndex,
onDestinationSelected: onDestinationSelected,
children: [
Padding(
padding: EdgeInsets.only(left: 28),
child: Text(
'Navigation Drawer',
style: GoogleFonts.manrope(
fontWeight: FontWeight.w500,
textStyle: Theme.of(context).textTheme.titleLarge,
height: 3,
),
),
),
NavigationDrawerDestination(
icon: Icon(Icons.token_outlined),
selectedIcon: Icon(Icons.token),
label: Text('Inbox'),
),
NavigationDrawerDestination(
icon: Icon(Icons.mail_outline),
selectedIcon: Icon(Icons.mail),
label: Text('OutBox'),
),
NavigationDrawerDestination(
icon: Icon(Icons.favorite_border_outlined),
selectedIcon: Icon(Icons.favorite),
label: Text('Favorites'),
),
NavigationDrawerDestination(
icon: Icon(Icons.delete_outline),
selectedIcon: Icon(Icons.delete),
label: Text('Trash'),
),
Divider(indent: 28, endIndent: 28),
NavigationDrawerDestination(
icon: Icon(Icons.circle_outlined),
label: Text('Label circle'),
),
NavigationDrawerDestination(
icon: Icon(Icons.change_history),
label: Text('Label triagle'),
),
NavigationDrawerDestination(
icon: Icon(Icons.square_outlined),
label: Text('Label square'),
),
Divider(indent: 28, endIndent: 28),
Center(
child: TextButton(
onPressed: () {},
child: Text('Navigation Drawer'),
),
),
Center(
child: OutlinedButton(
onPressed: () {},
child: Text('Navigation Drawer'),
),
),
Center(
child: ElevatedButton(
onPressed: () {},
child: Text('Navigation Drawer'),
),
),
Center(
child: FilledButton(
onPressed: () {},
child: Text('Navigation Drawer'),
),
),
Center(
child: FilledButton.tonal(
onPressed: () {},
child: Text('Navigation Drawer'),
),
),
Center(
child: FilledButton.tonalIcon(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CardScreen()),
);
},
icon: Icon(Icons.replay_circle_filled_outlined),
label: Text('Cards screen'),
),
),
],
);
}
}
class CardScreen extends StatelessWidget {
const CardScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Cards',
style: GoogleFonts.manrope(
fontWeight: FontWeight.w500,
textStyle: Theme.of(context).textTheme.titleLarge,
),
),
shape: Border.all(color: Colors.transparent),
),
body: ListView(
padding: EdgeInsets.all(20),
children: [
Card(
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Elevated Card')),
),
),
Card(
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Filled Card')),
),
),
Card(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(color: Theme.of(context).colorScheme.outline),
borderRadius: BorderRadius.circular(12),
),
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Outlined Card')),
),
),
Card(
child: InkWell(
onTap: () {},
radius: 150,
borderRadius: BorderRadius.circular(12),
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Elevated Card (clickable)')),
),
),
),
Card(
elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant,
child: InkWell(
onTap: () {},
radius: 150,
borderRadius: BorderRadius.circular(12),
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Filled Card (clickable)')),
),
),
),
Card(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(color: Theme.of(context).colorScheme.outline),
borderRadius: BorderRadius.circular(12),
),
child: InkWell(
onTap: () {},
radius: 150,
borderRadius: BorderRadius.circular(12),
child: SizedBox(
width: 300,
height: 150,
child: Center(child: Text('Outlined Card (clickable)')),
),
),
),
],
),
);
}
}
Both examples show the problem in both light and dark mode.
https://user-images.githubusercontent.com/102767277/211525680-26063ed1-46e9-464d-b2e6-d6e44d6207a8.mp4
https://user-images.githubusercontent.com/102767277/211526673-2e6c25a8-b713-4abb-bebc-ccf65b21efc5.mp4