CODEWITHSUNDEEP
androidflutter
UBUNTU_new
UBUNTU_new

Reputation: 43

Flutter Overlay Widget with textField

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 No material widget found. TextField require a Material widget ancestor Can you guys please help me out with this? Thanks so much!

Happy Coding guys!

enter image description here


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);

  }

}```

Upvotes: 0

Views: 5431

Answers (1)

Arash Mohammadi
Arash Mohammadi

Reputation: 1419

As flutter said, TextField needs a material widget as parent. You can wrap your TextField in one of these widgets that has Material widget in them: Card , Dialog , Drawer , Scaffold . Or you can directly use 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);
  }

I recommend using Dialog instead of overlay. Dialog don't cover whole screen and contains Material widget in itself. And it is more beautiful :).

Upvotes: 1

Related Questions