CODEWITHSUNDEEP
flutterflutter-layoutflutter-widget
Huzzi
Huzzi

Reputation: 571

Flutter popup widget

I have a Flutter app screen where I'm listing search results, on the right top I have a search icon when clicked on it I want to open a popup widget like navigation drawer. Is this achievable? Sample code would be great. Thanks

enter image description here

Upvotes: 0

Views: 191

Answers (3)

Adithaz
Adithaz

Reputation: 419

You can use drawer!

Create Drawer() widget

Drawer(
  child: //Your contents
)

In Scaffold, use endDrawer: instead of drawer: to make drawer pop from right

Scaffold(
  endDrawer: Drawer(),
)

And to open the drawer, put this inside onTap or onPressed

Scaffold.of(context).openDrawer();

Upvotes: 1

Yasharth Dubey
Yasharth Dubey

Reputation: 509

I have made the same like a drawer i am pasting the code below and you can see the same

 transform: Matrix4.translationValues(xOffset, yOffset , 0)..scale(scaleFactor)..rotateY(isDrawerOpen?-0.2:0),
      duration: Duration(milliseconds: 300),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(color: Color(0xFFECCB95), blurRadius: 20, offset: Offset(0, 10)),
        ],
        color :   Color(0xFF1C1C1C),
        borderRadius: BorderRadius.circular(isDrawerOpen?40:0.0),
      )
      ,
       child: Stack(
            children: [
              Transform.rotate(
                origin: Offset(30, -60),
                angle: 2.4,
                child: Container(
                  margin: EdgeInsets.only(
                    left: 75,
                    top: 40,
                  ),
                  height: 400,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(80),
                    gradient: LinearGradient(
                      begin: Alignment.bottomLeft,
                      colors : [Color(0xffFD8BAB), Color(0xFFFD44C4)],
                    ),
                  ),
                ),
              ),

this is the home page which is your first screen and now you have to create your second screen and call them in another file like below i have done

 @override
  void initState(){
    super.initState();
    getEmail();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF363567),
      body: Stack(
        children: [
          HomeScreen(),
          SideBar(),
        ],
      ),
    );

Now as you are calling both of them but the second screen only will appear once the search bar will be clicked so where i have used the button you can use it like you want. Using the same you can create any two screens and blur the one you want to blur.

Upvotes: 2

Moo
Moo

Reputation: 725

I use a modalBottomSheet, which opens from bottom to top (not from the right):

showModalBottomSheet(
                        context: context,
                        builder: (BuildContext context) {
                          return Container(
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                           
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  Text(
                                    'Filter Results'
                                  ),
                                  Divider(),
                                  Container(child: _searchForm(context)),
                                ],
                              ),
                            ),
                          );
                        });

Upvotes: 1

Related Questions