flutter/dev/a11y_assessments/lib/use_cases/material_banner.dart
Denis Bowen d528c7903f
refactor material banner and fix focus issue (#152646)
- Refactored material banner setup to make it more simple and stateless
- Added focusNode to where the dismiss button focuses automatically when banner is shown

Before: https://screencast.googleplex.com/cast/NTI4OTMxNjU2MDQwNDQ4MHw2ODdiMmYwOC1hMg
After: https://screencast.googleplex.com/cast/NjAzNTY4NDA2NTI4MDAwMHwyNTRjMWUxMi0zMA

fixes b/346646604
2024-08-19 23:11:58 +00:00

80 lines
2.0 KiB
Dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'use_cases.dart';
class MaterialBannerUseCase extends UseCase {
@override
String get name => 'MaterialBanner';
@override
String get route => '/material_banner';
@override
Widget build(BuildContext context) => const MainWidget();
}
class MainWidget extends StatefulWidget {
const MainWidget({super.key});
@override
State<MainWidget> createState() => MainWidgetState();
}
class MainWidgetState extends State<MainWidget> {
final FocusNode dismissButtonFocusNode = FocusNode();
final FocusNode showButtonFocusNode = FocusNode();
@override
void dispose() {
dismissButtonFocusNode.dispose();
showButtonFocusNode.dispose();
super.dispose();
}
void hideBanner() {
ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
showButtonFocusNode.requestFocus();
}
void showBanner() {
ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
padding: const EdgeInsets.all(20),
content: const Text('Hello, I am a Material Banner'),
leading: const Icon(Icons.agriculture_outlined),
backgroundColor: Colors.yellowAccent,
actions: <Widget>[
TextButton(
focusNode: dismissButtonFocusNode,
onPressed: hideBanner,
child: const Text('DISMISS'),
),
],
),
);
dismissButtonFocusNode.requestFocus();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Semantics(headingLevel: 1, child: const Text('MaterialBanner Demo')),
),
body: Center(
child: ElevatedButton(
focusNode: showButtonFocusNode,
onPressed: showBanner,
child: const Text('Show a MaterialBanner'),
),
),
);
}
}