Skip to content

Instantly share code, notes, and snippets.

@smith558
Created August 31, 2023 20:01
Show Gist options
  • Save smith558/5561be21023f4cc64cc4f0755191b30c to your computer and use it in GitHub Desktop.
Save smith558/5561be21023f4cc64cc4f0755191b30c to your computer and use it in GitHub Desktop.
NavigationRail with enlarged labels shows incorrect hover area in Material 3 [re-opened]
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => MyAppState(),
child: MaterialApp(
title: 'Namer App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
),
home: MyHomePage(),
),
);
}
}
class MyAppState extends ChangeNotifier {
var current = WordPair.random();
void getNext() {
current = WordPair.random();
notifyListeners();
}
var favorites = <WordPair>{};
void toggleFavorite() {
if (favorites.contains(current)) {
favorites.remove(current);
} else {
favorites.add(current);
}
notifyListeners();
}
}
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
SafeArea(
child: NavigationRail(
extended: false,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home, size: 50),
label: Text('Home'),
padding: EdgeInsets.symmetric(vertical: 8)
),
NavigationRailDestination(
icon: Icon(Icons.favorite, size: 50),
label: Text('Favorites'),
padding: EdgeInsets.symmetric(vertical: 8)
),
],
selectedIndex: selectedIndex,
onDestinationSelected: (value) => setState(() {
selectedIndex = value;
}),
),
),
Expanded(
child: Container(
color: Theme.of(context).colorScheme.primaryContainer,
child: GeneratorPage(),
),
),
],
),
);
}
}
class GeneratorPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
var pair = appState.current;
var theme = Theme.of(context);
IconData icon;
if (appState.favorites.contains(pair)) {
icon = Icons.favorite;
} else {
icon = Icons.favorite_border;
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'A random new word:',
style: theme.textTheme.headlineSmall,
),
SizedBox(height: 10),
BigCard(pair: pair),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
onPressed: () => appState.toggleFavorite(),
icon: Icon(icon),
label: Padding(
padding: const EdgeInsets.all(5.0),
child: Text('Like',
style: theme.textTheme.headlineSmall
?.copyWith(color: theme.colorScheme.primary)),
)),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => appState.getNext(),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text('Next',
style: theme.textTheme.headlineSmall
?.copyWith(color: theme.colorScheme.primary)),
),
),
],
)
],
),
);
}
}
class BigCard extends StatelessWidget {
const BigCard({
super.key,
required this.pair,
});
final WordPair pair;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
color: theme.colorScheme.primary,
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(20),
child: Text(
pair.asPascalCase,
style: theme.textTheme.displayMedium
?.copyWith(color: theme.colorScheme.onPrimary),
semanticsLabel: '${pair.first} ${pair.second}',
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment