focus.1.dart 2.12 KB
Newer Older
1 2 3 4 5 6
// 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';

7
/// Flutter code sample for [Focus].
8

9
void main() => runApp(const FocusExampleApp());
10

11 12
class FocusExampleApp extends StatelessWidget {
  const FocusExampleApp({super.key});
13 14 15 16

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
17
      home: FocusExample(),
18 19 20 21 22 23 24
    );
  }
}

class FocusableText extends StatelessWidget {
  const FocusableText(
    this.data, {
25
    super.key,
26
    required this.autofocus,
27
  });
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

  /// The string to display as the text for this widget.
  final String data;

  /// Whether or not to focus this widget initially if nothing else is focused.
  final bool autofocus;

  @override
  Widget build(BuildContext context) {
    return Focus(
      autofocus: autofocus,
      child: Builder(builder: (BuildContext context) {
        // The contents of this Builder are being made focusable. It is inside
        // of a Builder because the builder provides the correct context
        // variable for Focus.of() to be able to find the Focus widget that is
        // the Builder's parent. Without the builder, the context variable used
        // would be the one given the FocusableText build function, and that
        // would start looking for a Focus widget ancestor of the FocusableText
        // instead of finding the one inside of its build function.
        return Container(
          padding: const EdgeInsets.all(8.0),
          // Change the color based on whether or not this Container has focus.
          color: Focus.of(context).hasPrimaryFocus ? Colors.black12 : null,
          child: Text(data),
        );
      }),
    );
  }
}

58 59
class FocusExample extends StatelessWidget {
  const FocusExample({super.key});
60 61 62 63 64 65 66 67 68 69 70 71 72 73

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) => FocusableText(
          'Item $index',
          autofocus: index == 0,
        ),
        itemCount: 50,
      ),
    );
  }
}