Flutter 弹出带导航的寡妇

Question

I'm creating an app where when the "add an appointment button is clicked",it should display a pop up window with some content.In the pp up, when the book now button is clicked the content should change or a new popup should open displaying the staff

what is the best way to do this?

Answer 1

follow the code structure:

showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        contentPadding: EdgeInsets.zero,
        content: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Positioned(
              right: -15.0,
              top: -15.0,
              child: InkResponse(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: CircleAvatar(
                  radius: 12,
                  child: Icon(Icons.close, size: 18,),
                  backgroundColor: Colors.red,
                ),
              ),
            ),
            Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(
                    height: 60,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      color:Colors.yellow.withOpacity(0.2),
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.withOpacity(0.3))
                      )
                    ),
                    child: Center(child: Text("Contact Me", style:TextStyle(color: Colors.black54, fontWeight: FontWeight.w700, fontSize: 20, fontStyle: FontStyle.italic, fontFamily: "Helvetica"))),
                  ),
                  Padding(
                    padding: EdgeInsets.all(20.0),
                    child: Container(
                      height: 50,
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey.withOpacity(0.2) )
                      ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              flex:1,
                              child: Container(
                                width: 30,
                                child: Center(child: Icon(Icons.person, size: 35,color:Colors.grey.withOpacity(0.4))),
                                decoration: BoxDecoration(
                                    border: Border(
                                        right: BorderSide(color: Colors.grey.withOpacity(0.2))
                                    )
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 4,
                              child: TextFormField(
                                decoration: InputDecoration(
                                    hintText: "Name",
                                    contentPadding: EdgeInsets.only(left:20),
                                    border: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    errorBorder: InputBorder.none,
                                    hintStyle: TextStyle(color:Colors.black26, fontSize: 18, fontWeight: FontWeight.w500 )
                                ),

                              ),
                            )
                          ],
                        )
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: RaisedButton(
                      padding: EdgeInsets.zero,
                      child: Container(
                          width:MediaQuery.of(context).size.width,
                          height: 60,
                        decoration: BoxDecoration(
                           gradient: LinearGradient(
                             begin: Alignment.topCenter,
                             end: Alignment.bottomCenter,
                             colors: [
                               Color(0xffc9880b),
                               Color(0xfff77f00),
                             ]
                           )
                        ),
                        child: Center(child: Text("Submit", style: TextStyle(color:Colors.white70, fontSize: 20, fontWeight: FontWeight.w800),)),
                      ),
                      onPressed: () {
                        if (_formKey.currentState.validate()) {
                          _formKey.currentState.save();
                        }
                      },
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      );
    });