未找到材质小部件 文本字段小部件需要材质小部件祖先
Posted
技术标签:
【中文标题】未找到材质小部件 文本字段小部件需要材质小部件祖先【英文标题】：No material widget found textfield widgets require a material widget ancestor 【发布时间】：2019-01-17 06:24:09 【问题描述】：您好，我正在尝试在 Flutter 中构建登录屏幕，但打开时出现以下错误。
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),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
);
有人知道怎么解决吗？
【问题讨论】：
【参考方案1】：错误表明 TextField 小部件需要 Material 小部件祖先。只需将整个 loginWidget 包装到 Scaffold 即可解决问题。
Widget LoginPage()
return new Scaffold(body: *your whole code*)
【讨论】：
如果我不想使用Scaffold，还有其他选择吗？
你可以用Material包装它：github.com/flutter/flutter/issues/28326#issuecomment-466404656【参考方案2】：
只需像这样用 Material 包裹你的小部件：
@override
Widget build(BuildContext context)
return Material(
child: YourAwesomeWidget(),
【讨论】：
【参考方案3】：由于大多数小部件都要求材料小部件作为其父小部件
这是一个很好的做法，您应该在小部件树的顶部使用Material() 或Scaffold() 小部件，然后继续您的代码。
@override
Widget build(BuildContext context)
return Material(
child: body(),
或
@override
Widget build(BuildContext context)
return Scaffold(
child: body(),
【讨论】：
【参考方案4】：用 Scaffold 或 MaterialApp 包装 loginpage 函数
Widget LoginPage()
return new Scaffold(
body: Container(
*the rest of your code*
),
);
或
Widget LoginPage()
return new MaterialApp(
home: Container(
*the rest of your code*
),
);
【讨论】：
【参考方案5】：我遇到了同样的问题。永远记得输入 Scaffold 记住它必须作为创建页面的父级包含在内，在它之后，你将插入所有你想要的小部件，但是 MaterialApp 之后的 Scaffold 是第二个必须添加的组件，如果你正在创建一个新的页面。
【讨论】：
以上是关于未找到材质小部件 文本字段小部件需要材质小部件祖先的主要内容，如果未能解决你的问题，请参考以下文章
如何从一侧移除高程阴影而不从卡片或材质小部件中移除高程本身？
未处理的异常：查找已停用小部件的祖先是不安全的。如何解决这个问题？