No Material widget found

Question

I am new to Flutter and I was trying do execute the example here. I just want to use the TextField widget to get some user input. The issue is that I get a \"No Material wid

Answer 1

The error message says:

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.

In your case, I'd probably wrap your Column in a Scaffold. This will make it easy to add other material widgets to your app later, such as an AppBar, Drawer, or 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'),
        ),
      ],
    ),
  );
}

Answer 2

In my case I was using a hero widget Inside a scaffold like this

Scaffold(
  body:Hero(
    child:ListView(
       children:<Widget>[
           TextField(),
           ...
           ...
           ]
          )
        )
       );

I simply moved the Hero Widget Outside Scaffold and it solved the problem

Hero(
    child:Scaffold(
    body:ListView(
       children:<Widget>[
           TextField(),
           ...
           ...
           ]
          )
       ));

Answer 3

Put your widget inside a Scaffold, like this:

    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 {
...

Answer 4

The error means you have to wrap the column inside a Material widget, you could place it as a body to the scaffold or place it as a home to Materialapp. for instance:

 `return MaterialApp(
       home:  new Column(
       mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
       new TextField(
      controller: _controller,
      decoration: new InputDecoration(
        hintText: 'Type something',
      ),
    ),
      );`

or

`return Scaffold(
       body:  new Column(
       mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
       new TextField(
      controller: _controller,
      decoration: new InputDecoration(
        hintText: 'Type something',
      ),
    ),
      );``

Answer 5

The easy fix is:

Instead of using:

void main() {
  runApp(new MyApp());
}

You should use:

void main() => runApp(
  MaterialApp(
    home: MyApp()
  )
);

Hope this helps you!