title: Flutter Overlay Widget with textField
body: <p>Hey friends on StackOverflow, how are you guys doing today! I am new to Flutter and I'm facing some issues with understanding this language. I am trying to make an overlay of a textfield of a small size when I click on a button. However, I am facing a <code>No material widget found. TextField require a Material widget ancestor</code>  Can you guys please help me out with this? Thanks so much! </p>
  
  <p>Happy Coding guys!</p>
  
  <p><a href="https://i.stack.imgur.com/60TOH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60TOH.png" alt="enter image description here"></a></p>
  
  <pre><code>
  import 'package:flutter/material.dart';
  
  void main() =&gt; 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) =&gt; Positioned(
                top: 200.0,
                left: 1.0,
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Enter text',                
                ),
              ),
              ),
              );
  
      overlayState.insert(overlayEntry);
  
    }
  
  }```
  
  </code></pre>