BIS Tech
BIS Tech

Reputation: 19414

how to add flexible height to showGeneralDialog on Flutter?

I added padding for transparent outside. But fixed height. How to change it?

 padding: EdgeInsets.fromLTRB(20, 50, 20, 50),

Is it possible to remove above this line and flexible(center)?

I am expected like this flexible height alert. click here

onPressed: () {
                            showGeneralDialog(
                              context: context,
                              barrierColor: Palette.black.withOpacity(.3),
                              barrierDismissible: true,
                              transitionDuration: Duration(milliseconds: 400),
                              pageBuilder: (_, __, ___) {
                                return ChangePropertyPage(
                                    propertyModel: propertyModel);
                              },
                            );
                          },

change Property Page

class ChangePropertyPage extends StatelessWidget {
  final List<PropertyModel> propertyModel;

  const ChangePropertyPage({Key key, this.propertyModel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double width = CustomMediaQuery.width(context);
    return Padding(
      padding: EdgeInsets.fromLTRB(20, 50, 20, 50),
      child: Material(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              PropertyListTileWidget(
                  mainTitle: 'USER\'S Name', subTitle: 'USER\'S Email'),
              VerticalSpacing(height: 10),
              CustomLine(
                height: 1,
                width: (width - 40) - 20,
                color: Palette.black.withOpacity(.2),
              ),
              Expanded(
                child: ListView.builder(
                    itemCount: propertyModel.length,//now length is 1
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return InkWell(
                        onTap: ()async{
                        },
                        child: PropertyListTileWidget(
                            mainTitle: '${propertyModel[index].propertyName}',
                            subTitle: '${propertyModel[index].ownerUId}'),
                      );
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 1827

Answers (1)

Shruti Ramnandan Sharma
Shruti Ramnandan Sharma

Reputation: 4545

if you are expecting this:

enter image description here

enter image description here

then full code:


import 'package:flutter/material.dart';

class CustomDialogBox extends StatefulWidget {
  @override
  _CustomDialogBoxState createState() => _CustomDialogBoxState();
}

class _CustomDialogBoxState extends State<CustomDialogBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Dialog Box"),
        centerTitle: true,
      ),
      body:Center(
        child:FlatButton(
          color: Colors.blue,
          onPressed: (){
            showDialog(
              context: (context),
              child: ShowCustomDialogBox()
            );
          }, 
          child: Text("Show Dialog")
        )
      ) ,
    );
  }
}







class ShowCustomDialogBox extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => ShowCustomDialogBoxState();
}


class ShowCustomDialogBoxState extends State<ShowCustomDialogBox>with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> scaleAnimation;

  @override
  void initState() {
    super.initState();
    controller =  AnimationController(vsync: this, duration: Duration(milliseconds: 450)); 
    scaleAnimation =CurvedAnimation(parent: controller, curve: Curves.decelerate);
    controller.addListener(() {
      setState(() {});
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: ScaleTransition(
          scale: scaleAnimation,
          child: Container(
            margin: EdgeInsets.all(20.0),
              padding: EdgeInsets.all(8.0),
              height: MediaQuery.of(context).size.height/2.5, //Change height of dialog box.
              width: MediaQuery.of(context).size.width,
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0))),
                child: Column(
                children: <Widget>[

                  Expanded(
                    flex: 4,
                    child: ListView.builder(
                      itemCount: 10,
                      itemBuilder: (context, index){
                        return Column(
                          // mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text((index+1).toString(),style: TextStyle(color:Colors.blue,fontSize:40),),
                            Divider()
                          ],
                        );
                      }
                   )

                  ),
                  Padding(
                          padding: const EdgeInsets.only(
                            left: 20.0, right: 10.0, top: 0.0,),
                            child:  ButtonTheme(
                              height: 35.0,
                              minWidth: MediaQuery.of(context).size.width/3.5,
                              child: RaisedButton(
                                color: Colors.blue,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5.0)),
                                splashColor: Colors.white.withAlpha(40),
                                child: Text(
                                  'Next',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 13.0),
                                ),
                                onPressed: () {
                                  setState(() {
                                   Navigator.pop(context);
                                  });
                                },
                              )
                            )
                        ),
              ],
            )
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Related Questions