持久的底页表格数据 [英] Persistent bottom sheet form data

问题描述

我在底页上有一张表格.单击一个按钮即可将其打开.当用户在表单外部单击时，可以将其关闭.如果用户重新打开表单，我想保留表单数据.我不想显式地分配每个表单字段值.还有什么其他方法可以保存表单状态并在再次创建底部工作表时重新使用它?

I have one form on a bottom sheet. It's opened on click of one button. It can be closed when the user clicks outside the form. I want to maintain the form data if the user reopens the form. I don't want to assign each form field value explicitly. Is there any other way of saving the form state and reusing it while creating the bottom sheet again?

  void _modalBottomSheetMenu(BuildContext context, Widget form) async {
    await showModalBottomSheet<dynamic>(
        isDismissible: false,
        isScrollControlled:true,
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        ),
        backgroundColor: Colors.white,
        builder: (BuildContext bc) {
          return SingleChildScrollView(
              child: Container(
                  padding:
                  EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                  child: Padding(
                      padding: const EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0.0),
                      child: form) // From with TextField inside
              ));}
    );

推荐答案

因此，我终于找到了使用Provider维护状态的最佳方法之一.我还探索了其他方法，例如BLOC，但是它很冗长.在其他情况下，我们可以使用BLOC，但在有底表的情况下，使用Provider是更好的解决方案.

So I finally found one of the best approaches for maintaining the state using Provider. I also explored other ways such as BLOC but it was very verbose for it. We can use BLOC for other cases but Provider is a better solution in case of a bottom sheet.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider(
        create: (context) => TitleDataNotifier(),
        child: ButtomSheetScreen(),
      ),
    );
  }
}

class TitleDataNotifier with ChangeNotifier {
  String _name;

  String get name => _name;

  set name(String name) {
    _name = name;
    notifyListeners();
  }
}

class AddTaskScreen extends StatefulWidget {
  final TitleDataNotifier valueProvider;

  AddTaskScreen(this.valueProvider);

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

class _AddTaskScreenState extends State<AddTaskScreen> {
  final _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.text = widget.valueProvider.name;
  }

  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void deactivate() {
    widget.valueProvider.name = _controller.text;
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text(
            'Add Task',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 30.0,
                color: Colors.lightBlueAccent,
                fontWeight: FontWeight.w700),
          ),
          TextField(
            controller: _controller,
            autofocus: false,
            textAlign: TextAlign.center,
            onChanged: (newText) {
              widget.valueProvider._name = newText;
            },
          ),
          FlatButton(
            child: Text(
              'Add',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.lightBlueAccent,
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

class ButtomSheetScreen extends StatelessWidget {
  void openBottomSheet(context) {
    var valueProvider = Provider.of<TitleDataNotifier>(context, listen: false);
    showModalBottomSheet<dynamic>(
      context: context,
      builder: (BuildContext context) {
        return ChangeNotifierProvider.value(
          value: valueProvider,
          child: StatefulBuilder(
              builder: (BuildContext context, StateSetter state) {
            return Padding(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: Wrap(
                children: <Widget>[
                  AddTaskScreen(valueProvider),
                ],
              ),
            );
          }),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            "Bottom Sheet",
          ),
        ),
        body: Center(
          child: Container(
              child: IconButton(
            icon: const Icon(Icons.work),
            onPressed: () {
              openBottomSheet(context);
            },
          )),
        ));
  }
}

这篇关于持久的底页表格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！