未找到材料小部件文本字段小部件需要材料小部件祖先
[英]No material widget found textfield widgets require a material widget ancestor
问题描述
Hi I am trying to build a login screen in flutter but I am getting below error when opening it.
您好，我正在尝试在 flutter 中构建登录屏幕，但打开它时出现以下错误。
No material widget found textfield widgets require a material widget ancestor
import 'package:flutter/material.dart';
Widget LoginPage() {
return new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal@live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Forgot Password?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => {},
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => {},
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
Text(
"OR CONNECT WITH",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xff3B5998),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea90,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"FACEBOOK",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(left: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xffdb3236),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea88,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"GOOGLE",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
);
}
Does anyone know how to resolve it?有谁知道如何解决它？
6 个解决方案
解决方案1
78 已采纳 2018-08-09 18:19:19
Error states that TextField widgets require a Material widget ancestor.错误指出TextField 小部件需要 Material 小部件祖先。 Simply wrapping your whole loginWidget into Scaffold will solve the problem.只需将整个 loginWidget包装到Scaffold解决问题。
Widget LoginPage() {
return new Scaffold(body: *your whole code*)
}
解决方案2
16 2019-11-05 08:33:20
Just wrap your widget with Material like this:只需像这样用 Material 包裹你的小部件：
@override
Widget build(BuildContext context) {
return Material(
child: YourAwesomeWidget(),
}
解决方案3
5 2019-11-05 09:39:58
Since most of the widget asks for material widget as their parent widget由于大多数小部件要求材料小部件作为其父小部件
its a good practice you should use Material() or Scaffold() widget on top of the widget tree and then continue your code.这是一个很好的做法，您应该在小部件树的顶部使用Material()或Scaffold()小部件，然后继续您的代码。
@override
Widget build(BuildContext context) {
return Material(
child: body(),
}
OR或者
@override
Widget build(BuildContext context) {
return Scaffold(
child: body(),
}
解决方案4
4 2019-09-06 11:24:19
Wrap the loginpage function with a Scaffold or a MaterialApp用 Scaffold 或 MaterialApp 包裹 loginpage 函数
Widget LoginPage() {
return new Scaffold(
body: Container(
*the rest of your code*
),
);
}
or或者
Widget LoginPage() {
return new MaterialApp(
home: Container(
*the rest of your code*
),
);
}
解决方案5
3 2019-05-31 14:09:57
I encountered your same problem.我遇到了你同样的问题。 Always remember to enter Scaffold remembering that it must be included as a parent who creates the page, inside it after, you will insert all the widgets you want, but Scaffold after MaterialApp is the second component that must be added if you are creating a new page.永远记住进入 Scaffold 记住它必须作为创建页面的父级包含在内，之后，你将插入所有你想要的小部件，但是 MaterialApp 之后的 Scaffold 是如果你正在创建一个新的必须添加的第二个组件页。
解决方案6
1 2023-01-16 16:31:07
I got this error when trying to show a TextFormField as my content widget in a CupertinoDialogAlert .尝试在CupertinoDialogAlert中将TextFormField显示为我的content小部件时出现此错误。 My fix was to wrap content in a Card with an elevation of 0 and transparent color.我的解决方法是将内容包装在海拔高度为 0 且颜色透明的Card中。 content is an argument passed as a Widget. content是作为 Widget 传递的参数。 So it could really be any type of widget.所以它真的可以是任何类型的小部件。 I noticed that if I pass a Text widget, it loses its centering, so I programmatically do that as well.我注意到，如果我传递一个文本小部件，它就会失去居中，所以我也以编程方式这样做。
return CupertinoAlertDialog(
title: title,
content: Card(
elevation: 0,
color: Colors.transparent,
child: (content is Text)
? content
: Text(content.toString(), textAlign: TextAlign.center)),
actions: actions);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.