[英]Flutter Overlay Widget with textField
Hey friends on StackOverflow, how are you guys doing today.嘿,StackOverflow 上的朋友们,你们今天过得怎么样。 I am new to Flutter and I'm facing some issues with understanding this language.
我是 Flutter 的新手,我在理解这种语言方面遇到了一些问题。 I am trying to make an overlay of a textfield of a small size when I click on a button, However, I am facing a
No material widget found. TextField require a Material widget ancestor
当我单击一个按钮时,我试图覆盖一个小尺寸的文本字段,但是,我面临一个
No material widget found. TextField require a Material widget ancestor
No material widget found. TextField require a Material widget ancestor
Can you guys please help me out with this? No material widget found. TextField require a Material widget ancestor
你们能帮我解决这个问题吗? Thanks so much!非常感谢!
Happy Coding guys!快乐的编码家伙!
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "text page",
home: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appBar;
return new Scaffold(
appBar: AppBar(
title: Text("page"),
),
body: Center(
child: Container(
child: Text("This is a page blahblah"),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.message),
onPressed:(){
showOverlay(context);
},
),
);
}
//void method for overlay text field
void showOverlay(BuildContext context) async {OverlayState overlayState = Overlay.of(context);
OverlayEntry overlayEntry = OverlayEntry(
builder: (context) => Positioned(
top: 200.0,
left: 1.0,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter text',
),
),
),
);
overlayState.insert(overlayEntry);
}
}```
As flutter said, TextField
needs a material widget as parent.正如 flutter 所说,
TextField
需要一个材质小部件作为父级。 You can wrap your TextField in one of these widgets that has Material widget in them: Card
, Dialog
, Drawer
, Scaffold
.您可以将 TextField 包装在其中具有 Material 小部件的这些小部件之一中:
Card
、 Dialog
、 Drawer
、 Scaffold
。 Or you can directly use Material
.或者你可以直接使用
Material
。
void showOverlay(BuildContext context) async {
OverlayState overlayState = Overlay.of(context);
OverlayEntry overlayEntry = OverlayEntry(
builder: (context) => Material( //Use a Material Widget
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter text',
),
),
),
);
overlayState.insert(overlayEntry);
}
I recommend using Dialog instead of overlay.我建议使用 Dialog 而不是覆盖。 Dialog don't cover whole screen and contains Material widget in itself.
对话框不覆盖整个屏幕,并且本身包含 Material 小部件。 And it is more beautiful:).
它更漂亮:)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.