【Flutter】表单元素 TextField 报错 No Material Widget Found.

在 Flutter 中，TextField 需要在一个 Material 主题下才能正常工作。 如果你遇到 "No Material Widget Found." 错误，通常是因为 TextField 没有被包含在 MaterialApp 或 Scaffold 等提供 Material 主题的父级 Widget 中。

以下是一些解决方法：

方法 1: 使用 MaterialApp

确保你的应用根部有一个 MaterialApp，并且 TextField 被包含在其中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Enter your name',
            ),
          ),
        ),
      ),
    );
  }
}

方法 2: 使用 Scaffold

如果你已经在 MaterialApp 中，但仍然遇到问题，确保 TextField 被包含在 Scaffold 中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Enter your name',
            ),
          ),
        ),
      ),
    );
  }
}

方法 3: 使用 Material Widget

如果上述方法都不适用，你可以直接在 TextField 上方添加一个 Material Widget。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Material(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Enter your name',
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方法 4: 检查 TextField 的上下文

确保 TextField 的上下文中有 Material 主题。如果你在一个自定义的 Widget 中使用 TextField，确保该 Widget 被正确地嵌套在 Material 主题中。

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: 'Enter your name',
          ),
        ),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Center(
          child: MyCustomWidget(),
        ),
      ),
    );
  }
}

通过以上方法，你应该能够解决 "No Material widget found" 错误，并使 TextField 正常工作。