CODEWITHSUNDEEP
flutterpopover
Ritesh Srivastav
Ritesh Srivastav

Reputation: 70

How to show a widget in a popover in flutter?

enter image description here

I want to create a popover as shown in the image where I can add column to the popover and fill its children as required

I've tried this but I couldn't figure out how to achieve the objective.

Upvotes: 0

Views: 3547

Answers (2)

Ali Jawad
Ali Jawad

Reputation: 376

I figured it out, Just Wrap the widget where you are calling the popover around builder widget and use it's context

Hope this solution helps as this helped me in every case where I had the problem using popover package!

Upvotes: 4

Rahul Variya
Rahul Variya

Reputation: 1352

Hi please try the below code :

class PopoverExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Popover Example')),
        body: const SafeArea(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Button(),
          ),
        ),
      ),
    );
  }
}

class Button extends StatefulWidget {
  const Button({Key? key}) : super(key: key);

  @override
  State<Button> createState() => _ButtonState();
}

class _ButtonState extends State<Button> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
      child: TextFormField(
        style: const TextStyle(),
        onTap: () {
          showPopover(
            context: context,
            bodyBuilder: (context) => const ListItems(),
            onPop: () => print('Popover was popped!'),
            direction: PopoverDirection.top,
            width: 200,
            height: 400,
            arrowHeight: 15,
            arrowWidth: 30,
          );
        },
        decoration: const InputDecoration(hintText: "Search Client"),
      ),
    );
  }
}

class ListItems extends StatelessWidget {
  const ListItems({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            TextFormField(
              decoration: const InputDecoration(hintText: "search"),
            )
          ],
        ),
      ),
    );
  }
}

output

Upvotes: 1

Related Questions