Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

我在弹窗中使用TextField时遇到了错误 #53

Closed
yangbean4 opened this issue Mar 23, 2020 · 5 comments
Closed

我在弹窗中使用TextField时遇到了错误 #53

yangbean4 opened this issue Mar 23, 2020 · 5 comments
Labels
wontfix This will not be worked on

Comments

@yangbean4
Copy link

yangbean4 commented Mar 23, 2020

这是我的错误日志:

Reload already in progress, ignoring request
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building TextField(controller: TextEditingController#86c12(TextEditingValue(text: ┤├, selection: TextSelection(baseOffset: -1, extentOffset: -1, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))), decoration: InputDecoration(filled: true, fillColor: Color(0xffefefef), border: _NoInputBorder()), style: TextStyle(inherit: true, color: Color(0xff000000), size: 13.3, height: 1.0x), dirty, state: _TextFieldState#8dc02):
No Material widget found.

TextField widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.

To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold.

The specific widget that could not find a Material ancestor was: TextField
    controller: TextEditingController#86c12(TextEditingValue(text: ┤├, selection: TextSelection(baseOffset: -1, extentOffset: -1, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1)))

看起来像是TextField组件需要有一个MaterialApp的祖先组件;
然而 我在使用OKToast的时候:

// main.dart 的build部分
 Widget build(BuildContext context) {
    return DoubleQuit(
        child: OKToast(
            child: MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: TextTheme().apply(decoration: TextDecoration.none)),
      initialRoute: 'Home',
      onGenerateRoute: onGenerateRoute,
    )));
  }
}

OKToast是包裹着MaterialApp的, 看起来使得TextField没有MaterialApp作为其祖先 ;导致了错误.

请问有什么解决方案么?

@yangbean4
Copy link
Author

yangbean4 commented Mar 23, 2020

这是我的环境:
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.6)
[✓] Connected device (1 available)

版本号为 oktoast: 2.3.1+1

//演示使用的方法
_showModal() {
  showToastWidget(
    _InputModel(),
    dismissOtherToast: false,
    duration: Duration(days: 1),
    handleTouch: true,
  );
}

class _InputModel extends StatefulWidget {
  _InputModel({Key key}) : super(key: key);

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

class __InputModelState extends State<_InputModel> {
  TextEditingController _controller = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().setWidth(600),
      height: ScreenUtil().setWidth(452),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ModalTitle('Enter Invitation Code'),
          Container(
              width: ScreenUtil().setWidth(460),
              height: ScreenUtil().setWidth(100),
              child: Card(
                child: TextField(
                  controller: _controller,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    // fillColor: MyTheme.grayColor,
                  ),
                  style: TextStyle(
                      fontSize: ScreenUtil().setWidth(40),
                      height: 1.0,
                      color: Colors.black),
                ),
              ))
        ],
      ),
    );
  }
}

@CaiJingLong
Copy link
Member

It is not recommended to include TextField in OKToast, because TextField requires MediaQuery Material, Overlay, etc. as the parent widget.

@yangbean4
Copy link
Author

It is not recommended to include TextField in OKToast, because TextField requires MediaQuery Material, Overlay, etc. as the parent widget.

Yes, I understand this. But I think the use of TextField in Layer is a very common requirement. Although I use Stack to overlay on my page to meet my needs. But I still hope that oktoast can support this scenario, otherwise Point out this risk point in the introduction.

@CaiJingLong CaiJingLong added the wontfix This will not be worked on label May 14, 2020
@CaiJingLong
Copy link
Member

CaiJingLong commented May 14, 2020

Replace

OKToast(
  /// set toast style, optional
  child:MaterialApp()
);

to

MaterialApp(builder: (context, widget) {
    return OKToast(
      child: widget,
    );
  });

@yangbean4

@CaiJingLong
Copy link
Member

And you just use

showToastWidget(
  Material(
    child:TextField(),
    handleTouch: true,
  );

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

2 participants