| // 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. |
| |
| // Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl |
| // |
| // Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring |
| // of samples, and may be ignored if you are just exploring the sample. |
| |
| // Flutter code sample for FocusNode |
| // |
| //*************************************************************************** |
| //* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| // This example shows how a FocusNode should be managed if not using the |
| // [Focus] or [FocusScope] widgets. See the [Focus] widget for a similar |
| // example using [Focus] and [FocusScope] widgets. |
| |
| //* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //*************************************************************************** |
| |
| import 'package:flutter/material.dart'; |
| //**************************************************************************** |
| //* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| import 'package:flutter/services.dart'; |
| |
| //* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //**************************************************************************** |
| |
| void main() => runApp(const MyApp()); |
| |
| /// This is the main application widget. |
| class MyApp extends StatelessWidget { |
| const MyApp({Key? key}) : super(key: key); |
| |
| static const String _title = 'Flutter Code Sample'; |
| |
| @override |
| Widget build(BuildContext context) { |
| return MaterialApp( |
| title: _title, |
| home: Scaffold( |
| appBar: AppBar(title: const Text(_title)), |
| body: const MyStatelessWidget(), |
| ), |
| ); |
| } |
| } |
| |
| //***************************************************************************** |
| //* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| class ColorfulButton extends StatefulWidget { |
| const ColorfulButton({Key? key}) : super(key: key); |
| |
| @override |
| State<ColorfulButton> createState() => _ColorfulButtonState(); |
| } |
| |
| class _ColorfulButtonState extends State<ColorfulButton> { |
| late FocusNode _node; |
| bool _focused = false; |
| late FocusAttachment _nodeAttachment; |
| Color _color = Colors.white; |
| |
| @override |
| void initState() { |
| super.initState(); |
| _node = FocusNode(debugLabel: 'Button'); |
| _node.addListener(_handleFocusChange); |
| _nodeAttachment = _node.attach(context, onKey: _handleKeyPress); |
| } |
| |
| void _handleFocusChange() { |
| if (_node.hasFocus != _focused) { |
| setState(() { |
| _focused = _node.hasFocus; |
| }); |
| } |
| } |
| |
| KeyEventResult _handleKeyPress(FocusNode node, RawKeyEvent event) { |
| if (event is RawKeyDownEvent) { |
| print('Focus node ${node.debugLabel} got key event: ${event.logicalKey}'); |
| if (event.logicalKey == LogicalKeyboardKey.keyR) { |
| print('Changing color to red.'); |
| setState(() { |
| _color = Colors.red; |
| }); |
| return KeyEventResult.handled; |
| } else if (event.logicalKey == LogicalKeyboardKey.keyG) { |
| print('Changing color to green.'); |
| setState(() { |
| _color = Colors.green; |
| }); |
| return KeyEventResult.handled; |
| } else if (event.logicalKey == LogicalKeyboardKey.keyB) { |
| print('Changing color to blue.'); |
| setState(() { |
| _color = Colors.blue; |
| }); |
| return KeyEventResult.handled; |
| } |
| } |
| return KeyEventResult.ignored; |
| } |
| |
| @override |
| void dispose() { |
| _node.removeListener(_handleFocusChange); |
| // The attachment will automatically be detached in dispose(). |
| _node.dispose(); |
| super.dispose(); |
| } |
| |
| @override |
| Widget build(BuildContext context) { |
| _nodeAttachment.reparent(); |
| return GestureDetector( |
| onTap: () { |
| if (_focused) { |
| _node.unfocus(); |
| } else { |
| _node.requestFocus(); |
| } |
| }, |
| child: Center( |
| child: Container( |
| width: 400, |
| height: 100, |
| color: _focused ? _color : Colors.white, |
| alignment: Alignment.center, |
| child: |
| Text(_focused ? "I'm in color! Press R,G,B!" : 'Press to focus'), |
| ), |
| ), |
| ); |
| } |
| } |
| |
| //* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //***************************************************************************** |
| |
| /// This is the stateless widget that the main application instantiates. |
| class MyStatelessWidget extends StatelessWidget { |
| const MyStatelessWidget({Key? key}) : super(key: key); |
| |
| @override |
| //******************************************************************** |
| //* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| Widget build(BuildContext context) { |
| final TextTheme textTheme = Theme.of(context).textTheme; |
| return DefaultTextStyle( |
| style: textTheme.headline4!, |
| child: const ColorfulButton(), |
| ); |
| } |
| |
| //* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //******************************************************************** |
| |
| } |