使用TextField拋出「No Material widget found」錯誤

Question

我是新來撲，我試圖執行示例here。我只想使用TextField小部件來獲取一些用戶輸入。問題是我得到了一個「沒有找到材質部件」。錯誤。我究竟做錯了什麼 ？謝謝。

代碼：

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. 

Answer 1

錯誤消息說：

要引入Material小部件，您可以直接包括一個， 或使用包含Material本身的小部件，例如Card， Dialog，Drawer或Scaffold。

在你的情況，我可能會換你一個ScaffoldColumn。這樣可以很容易地將其他材質小部件添加到您的應用程序中，例如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'), 
     ), 
     ], 
    ), 
); 
}