No material widget found textfield widgets require a material widget ancestor
39,972
Solution 1
Error states that TextField widgets require a Material widget ancestor. Simply wrapping your whole loginWidget into Scaffold will solve the problem.
Widget LoginPage() {
return new Scaffold(body: *your whole code*)
}
Solution 2
Just wrap your widget with Material like this:
@override
Widget build(BuildContext context) {
return Material(
child: YourAwesomeWidget(),
}
Solution 3
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.
@override
Widget build(BuildContext context) {
return Material(
child: body(),
}
OR
@override
Widget build(BuildContext context) {
return Scaffold(
child: body(),
}
Solution 4
Wrap the loginpage function with a Scaffold or a MaterialApp
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*
),
);
}
Solution 5
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.
Author by
N Sharma
I have done masters in Advanced Software Engineering. I have worked on various technologies like Java, Android, Design patterns. My research area during my masters is revolving around the Recommendation algorithms that E-commerce websites are using in order to recommend the products to their customers on the basis of their preferences.
Updated on July 09, 2022Comments
-
N Sharma almost 2 years
Hi I am trying to build a login screen in flutter but I am getting below error when opening it.
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: '[email protected]', 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 ?
-
Ragas over 5 yearsIs there any alternative if I don't want to use
Scaffold. -
mjakic about 5 yearsYou could wrap it with
Material: github.com/flutter/flutter/issues/28326#issuecomment-466404656
