CODEWITHSUNDEEP
fluttertextfield
fredy4
fredy4

Reputation: 75

flutter, TextField how to use it?

How can I use the TextField? I have try on StatelessWidget and StatefulWidget, still does not work.

Here is my code:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        decoration: InputDecoration(
          hintText: 'demo'
        ),
      ),
    );
  }
}

Error code:

I/flutter (22662): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (22662): The following assertion was thrown building TextField(decoration: InputDecoration(hintText: "demo"),
I/flutter (22662): dirty, state: _TextFieldState#c0899):
I/flutter (22662): No Material widget found.
I/flutter (22662): TextField widgets require a Material widget ancestor.
I/flutter (22662): In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
I/flutter (22662): material library, that material is represented by the Material widget. It is the Material widget
I/flutter (22662): that renders ink splashes, for instance. Because of this, many material library widgets require that
I/flutter (22662): there be a Material widget in the tree above them.
I/flutter (22662): To introduce a Material widget, you can either directly include one, or use a widget that contains
I/flutter (22662): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
I/flutter (22662): The specific widget that could not find a Material ancestor was:
I/flutter (22662):   TextField(decoration: InputDecoration(hintText: "demo"))
I/flutter (22662): The ancestors of this widget were:
I/flutter (22662):   Container
I/flutter (22662):   MyApp
I/flutter (22662):   [root]

Upvotes: 0

Views: 150

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267404

void main() {
  runApp(
    MaterialApp( // make your MyApp a MaterialApp
      home: MyApp()
    ),
  );
}

You need to use either MaterialApp or WidgetsApp as the root of your widget tree in order to use material widgets.

Also update your build() method to include Scaffold

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextField(
        decoration: InputDecoration(hintText: 'demo'),
      ),
    ),
  );
}

Upvotes: 2

Related Questions