Question

嘿，StackOverflow上的朋友们，你们今天好吗！我是Flutter的新手，在理解这种语言时遇到了一些问题。单击按钮时，我试图覆盖一个较小尺寸的文本字段。但是，我正面临着No material widget found. TextField require a Material widget ancestor你们能帮我解决这个问题吗？非常感谢！

编码专家们！


import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "text page",
      home: FirstPage(),
    );
  }
}


class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appBar;
        return new Scaffold(

        appBar: AppBar(
        title: Text("page"),
      ),
      body: Center(
        child: Container(
          child: Text("This is a page blahblah"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.message),
        onPressed:(){
          showOverlay(context);
        },
      ),

    );
  }

//void method for overlay text field
  void showOverlay(BuildContext context) async {OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
        builder: (context) => Positioned(
              top: 200.0,
              left: 1.0,
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Enter text',                
              ),
            ),
            ),
            );

    overlayState.insert(overlayEntry);

  }

}```

Answer 1

正如扑扑所说，TextField需要一个材质小部件作为父级。您可以将TextField包装在其中具有“材质”小部件的这些小部件之一中：Card，Dialog，Drawer，Scaffold。或者，您可以直接使用Material。

void showOverlay(BuildContext context) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => Material( //Use a Material Widget
        child: TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Enter text',
          ),
        ),
      ),
    );

    overlayState.insert(overlayEntry);
  }

我建议使用Dialog而不是overlay。对话框不会覆盖整个屏幕，并且本身包含Material部件。而且更漂亮：）。

Answer 2

这里的问题是“文本字段”需要父材质小部件来呈现，因此，只需用材料小部件（例如卡片，对话框，抽屉，脚手架）包裹覆盖子完成了

Card(child:Positioned(
          top: 200.0,
          left: 1.0,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter text',                
          ),
        ),
        ),
        ),
        );

带有textField的Flutter Overlay Widget

2 个答案: