bottom sheet or dialog on top of grid about pluto_grid HOT 3 CLOSED

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

import '../dummy_data/development.dart';

/// How to handle the focus of PlutoGrid and other Focus like Dialog or Modal.
///
/// 1. Wrap the PlutoGrid to FocusScope.
///
/// ```dart
/// child: FocusScope(
///   canRequestFocus: _canGridFocus,
///   child: PlutoGrid(
///     columns: dummyData.columns,
///     rows: dummyData.rows,
///     onChanged: (PlutoOnChangedEvent event) {
///       print(event);
///     },
///   ),
/// ),
/// ```
///
/// 2. When opening a dialog or modal, change the canRequestFocus value
///    passed to the FocusScope of PlutoGrid to false.
///
/// ```dart
/// void setGridFocus(bool flag) {
///   if (flag != _canGridFocus) {
///     setState(() {
///       _canGridFocus = flag;
///     });
///   }
/// }
///
/// floatingActionButton: FloatingActionButton.extended(
///   onPressed: () {
///     setGridFocus(false);
///
///     Future<void> futureModal = showModalBottomSheet<void>(
///      ...
///     );
///      ...
///    },
/// ),
/// ```
///
/// 3. When the open dialog or modal is closed,
///    change the canRequestFocus value passed to the FocusScope of PlutoGrid
///    to true.
///
/// ```dart
/// Future<void> futureModal = showModalBottomSheet<void>(
///   ...
/// );
///
/// futureModal.then((_) {
///   setGridFocus(true);
/// });
/// ```
class HandlingFocusScreen extends StatefulWidget {
  static const routeName = 'handling-focus';

  @override
  _HandlingFocusScreenState createState() => _HandlingFocusScreenState();
}

class _HandlingFocusScreenState extends State<HandlingFocusScreen> {
  final dummyData = DummyData(10, 100);

  bool _canGridFocus = true;

  void setGridFocus(bool flag) {
    if (flag != _canGridFocus) {
      setState(() {
        _canGridFocus = flag;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PlutoGrid - Handling focus'),),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          setGridFocus(false);

          Future<void> futureModal = showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.white,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      TextField(),
                      RaisedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      )
                    ],
                  ),
                ),
              );
            },
          );

          futureModal.then((_) {
            setGridFocus(true);
          });
        },
        label: Text('PlutoGrid'),
        icon: Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
      ),
      body: Container(
        padding: const EdgeInsets.all(30),
        child: FocusScope(
          canRequestFocus: _canGridFocus,
          child: PlutoGrid(
            columns: dummyData.columns,
            rows: dummyData.rows,
            onChanged: (PlutoOnChangedEvent event) {
              print(event);
            },
          ),
        ),
      ),
    );
  }
}