未找到 Material 个小部件
No Material widget found
我是 Flutter 的新手，我正在尝试执行示例 here。我只想使用 TextField 小部件来获取一些用户输入。问题是我收到 "No Material widget found." 错误。我究竟做错了什么 ？谢谢。
代码：
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new ExampleWidget(),
);
}
}
/// Opens an [AlertDialog] showing what the user typed.
class ExampleWidget extends StatefulWidget {
ExampleWidget({Key key}) : super(key: key);
@override
_ExampleWidgetState createState() => new _ExampleWidgetState();
}
/// State for [ExampleWidget] widgets.
class _ExampleWidgetState extends State<ExampleWidget> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
);
}
}
这是错误堆栈：
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Built build/app/outputs/apk/app-debug.apk (21.5MB).
I/flutter ( 5187): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5187): The following assertion was thrown building InputDecorator(decoration: InputDecoration(hintText:
I/flutter ( 5187): "Type something"); baseStyle: null; isFocused: false; isEmpty: true; dirty):
I/flutter ( 5187): No Material widget found.
I/flutter ( 5187): InputDecorator widgets require a Material widget ancestor.
I/flutter ( 5187): In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
I/flutter ( 5187): material library, that material is represented by the Material widget. It is the Material widget
I/flutter ( 5187): that renders ink splashes, for instance. Because of this, many material library widgets require that
I/flutter ( 5187): there be a Material widget in the tree above them.
I/flutter ( 5187): To introduce a Material widget, you can either directly include one, or use a widget that contains
I/flutter ( 5187): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
I/flutter ( 5187): The specific widget that could not find a Material ancestor was:
I/flutter ( 5187): InputDecorator(decoration: InputDecoration(hintText: "Type something"); baseStyle: null;
I/flutter ( 5187): isFocused: false; isEmpty: true)
I/flutter ( 5187): The ownership chain for the affected widget is:
I/flutter ( 5187): InputDecorator ← AnimatedBuilder ← Listener ← _GestureSemantics ← RawGestureDetector ←
I/flutter ( 5187): GestureDetector ← TextField ← Column ← ExampleWidget ← _ModalScopeStatus ← ⋯
I/flutter ( 5187):
I/flutter ( 5187): When the exception was thrown, this was the stack:
I/flutter ( 5187): #0 debugCheckHasMaterial.<anonymous closure> (package:flutter/src/material/debug.dart:26)
I/flutter ( 5187): #2 debugCheckHasMaterial (package:flutter/src/material/debug.dart:23)
I/flutter ( 5187): #3 InputDecorator.build (package:flutter/src/material/input_decorator.dart:334)
... <output omitted>
I/flutter ( 5187): (elided one frame from class _AssertionError)
I/flutter ( 5187): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 5187): Another exception was thrown: No Material widget found.
错误消息说：
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.
对于你的情况，我可能会将你的 Column 包装在 Scaffold 中。这将使以后向您的应用程序添加其他 material 小部件变得容易，例如 AppBar、Drawer 或 FloatingActionButton.
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
),
);
}
简单的解决方法是：
而不是使用：
void main() {
runApp(new MyApp());
}
你应该使用：
void main() => runApp(
MaterialApp(
home: MyApp()
)
);
希望对您有所帮助！
错误意味着您必须将列包装在 Material 小部件中，您可以将其作为主体放置到脚手架或将其作为主页放置到 Materialapp。例如：
return MaterialApp(
home: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: new InputDecoration(hintText: 'Type something'),
),
]
),
);
或
return MaterialApp(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: new InputDecoration(hintText: 'Type something'),
),
]
),
);
在我的例子中，我使用了一个像这样的脚手架内的英雄小部件
Scaffold(
body:Hero(
child:ListView(
children:<Widget>[
TextField(),
...
...
]
)
)
);
我简单地将 Hero Widget 移到了 Scaffold 之外，问题就解决了
Hero(
child:Scaffold(
body:ListView(
children:<Widget>[
TextField(),
...
...
]
)
)
);
将您的小部件放入脚手架中，如下所示：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
//home: MyWidget(), --> do not do this !!!
home: Home() --> this will wrap it in Scaffold
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: MyWidget()); --> put your widget here
}
}
class MyWidget extends StatefulWidget {
...
这可能是路由错误造成的。
一条一条地检查你的路线。
只需用 Material widget 包装您的 Widget，即可解决问题。
Material(
child: InkWell(
onTap: onPressed,));
而不是 InkWell 使用 GestureDetector 小部件，对我来说已解决问题。
我是 Flutter 的新手，我正在尝试执行示例 here。我只想使用 TextField 小部件来获取一些用户输入。问题是我收到 "No Material widget found." 错误。我究竟做错了什么 ？谢谢。
代码：
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new ExampleWidget(),
);
}
}
/// Opens an [AlertDialog] showing what the user typed.
class ExampleWidget extends StatefulWidget {
ExampleWidget({Key key}) : super(key: key);
@override
_ExampleWidgetState createState() => new _ExampleWidgetState();
}
/// State for [ExampleWidget] widgets.
class _ExampleWidgetState extends State<ExampleWidget> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
);
}
}
这是错误堆栈：
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Built build/app/outputs/apk/app-debug.apk (21.5MB).
I/flutter ( 5187): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5187): The following assertion was thrown building InputDecorator(decoration: InputDecoration(hintText:
I/flutter ( 5187): "Type something"); baseStyle: null; isFocused: false; isEmpty: true; dirty):
I/flutter ( 5187): No Material widget found.
I/flutter ( 5187): InputDecorator widgets require a Material widget ancestor.
I/flutter ( 5187): In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
I/flutter ( 5187): material library, that material is represented by the Material widget. It is the Material widget
I/flutter ( 5187): that renders ink splashes, for instance. Because of this, many material library widgets require that
I/flutter ( 5187): there be a Material widget in the tree above them.
I/flutter ( 5187): To introduce a Material widget, you can either directly include one, or use a widget that contains
I/flutter ( 5187): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
I/flutter ( 5187): The specific widget that could not find a Material ancestor was:
I/flutter ( 5187): InputDecorator(decoration: InputDecoration(hintText: "Type something"); baseStyle: null;
I/flutter ( 5187): isFocused: false; isEmpty: true)
I/flutter ( 5187): The ownership chain for the affected widget is:
I/flutter ( 5187): InputDecorator ← AnimatedBuilder ← Listener ← _GestureSemantics ← RawGestureDetector ←
I/flutter ( 5187): GestureDetector ← TextField ← Column ← ExampleWidget ← _ModalScopeStatus ← ⋯
I/flutter ( 5187):
I/flutter ( 5187): When the exception was thrown, this was the stack:
I/flutter ( 5187): #0 debugCheckHasMaterial.<anonymous closure> (package:flutter/src/material/debug.dart:26)
I/flutter ( 5187): #2 debugCheckHasMaterial (package:flutter/src/material/debug.dart:23)
I/flutter ( 5187): #3 InputDecorator.build (package:flutter/src/material/input_decorator.dart:334)
... <output omitted>
I/flutter ( 5187): (elided one frame from class _AssertionError)
I/flutter ( 5187): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 5187): Another exception was thrown: No Material widget found.
错误消息说：
To introduce a
Materialwidget, you can either directly include one, or use a widget that containsMaterialitself, such as aCard,Dialog,Drawer, orScaffold.
对于你的情况，我可能会将你的 Column 包装在 Scaffold 中。这将使以后向您的应用程序添加其他 material 小部件变得容易，例如 AppBar、Drawer 或 FloatingActionButton.
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
),
);
}
简单的解决方法是：
而不是使用：
void main() {
runApp(new MyApp());
}
你应该使用：
void main() => runApp(
MaterialApp(
home: MyApp()
)
);
希望对您有所帮助！
错误意味着您必须将列包装在 Material 小部件中，您可以将其作为主体放置到脚手架或将其作为主页放置到 Materialapp。例如：
return MaterialApp(
home: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: new InputDecoration(hintText: 'Type something'),
),
]
),
);
或
return MaterialApp(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: new InputDecoration(hintText: 'Type something'),
),
]
),
);
在我的例子中，我使用了一个像这样的脚手架内的英雄小部件
Scaffold(
body:Hero(
child:ListView(
children:<Widget>[
TextField(),
...
...
]
)
)
);
我简单地将 Hero Widget 移到了 Scaffold 之外，问题就解决了
Hero(
child:Scaffold(
body:ListView(
children:<Widget>[
TextField(),
...
...
]
)
)
);
将您的小部件放入脚手架中，如下所示：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
//home: MyWidget(), --> do not do this !!!
home: Home() --> this will wrap it in Scaffold
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: MyWidget()); --> put your widget here
}
}
class MyWidget extends StatefulWidget {
...
这可能是路由错误造成的。
一条一条地检查你的路线。
只需用 Material widget 包装您的 Widget，即可解决问题。
Material(
child: InkWell(
onTap: onPressed,));
而不是 InkWell 使用 GestureDetector 小部件，对我来说已解决问题。