Search code examples
flutterline-breaksflutter-packages

RflutterAlert : making a button in another line


Hello everyone i have this simple code that contains 3 buttons

void _showOptions (bill , context){
    Alert(
      context: context,
      type: AlertType.info,
      style: AlertStyle(titleStyle: Theme.of(context).textTheme.bodyText1),
      title: translator.currentLanguage == 'ar' ? 'الخيارات'
          : 'Options',
      buttons: [
        DialogButton(
          onPressed: (){
            Navigator.push(context,
                MaterialPageRoute(builder: (BuildContext context) =>
                    BillView(widget.userInformation , widget.userInformation, bill))
            );
          },
          color: Color(0xffff9900),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(translator.translate("view_bill"), style: TextStyle(color: Colors.white)),
              SizedBox(width: 5,),
              Icon(Icons.featured_play_list , color: Colors.white,)
            ],
          ),
        ),

        DialogButton(
        onPressed: (){
            Navigator.push(context,
                MaterialPageRoute(builder: (BuildContext context) =>
                    PurchasesEdit(widget.userInformation , widget.userInformation, bill))
            );
          },
          color: Colors.blue,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(translator.translate("edit"), style: TextStyle(color: Colors.white)),
                SizedBox(width: 5,),
                Icon(Icons.edit , color: Colors.white,)
              ],
            ),
          ),
        DialogButton(
          onPressed: (){
            return _deleteBill(bill['id'] ,  context);
          },
          color: Colors.red,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(translator.translate("delete"), style: TextStyle(color: Colors.white)),
                SizedBox(width: 5,),
                Icon(Icons.delete_forever , color: Colors.white,)
              ],
            ),
          ),
      ],
    ).show();
  }

its working fine but the three buttons are next to each other and i want one of them to be at the bottom and the other two to be at the top

the result right now

View -- Edit -- Delete

What i want

Edit -- Delete

----View------

How should i do that ?

Thanks in Advance


Solution

  • The library uses a Row to Render Buttons, so it's impossible to make a

    Edit -- Delete

    ----View------

    layout. I don't use that library but you might need to fork the github project, or use only one DialogButton and inside there make your custom button layout in the child property, or add your buttons directly to content. There is a lot of workarounds but the main one i would suggest is using showGeneralDialog, sure it might take some time to set up, but you can do custom layouts more easily in there