Home > Back-end >  How to position two widgets
How to position two widgets

Time:08-18

I was dealing with AlertDialog and I ran into a positioning problem.

I made two action buttons in the form of a widget and I can't position them in the ways I know

Widget Button1 = ElevatedButton(
      style: AlerDialogElevatedButtonStyle.ElevatedButtonFullBlueStyle,
    child: Row(
      children: const [
        Text("Button1"),
        SizedBox(width: 10,),
        Icon(Icons.star, color: Colors.white)
      ],
    ), 
    onPressed: () {}
  );

  Widget Button2 =  ElevatedButton(
    style: AlerDialogElevatedButtonStyle.ElevatedButtonBlueStyle,
    child: Row(
      children: [
        const Text("Button2", style: AlertDialogTitleFontStyle.BlueTextStyle),
          SizedBox(width: 10,),
        Icon(Icons.star, color: Colors.blue)
      ],
    ),
    onPressed:() => Navigator.pop(context),
  );

Style//

abstract class AlerDialogElevatedButtonStyle {
  static final ButtonStyle ElevatedButtonFullBlueStyle = ButtonStyle(
      shadowColor: MaterialStateProperty.all<Color>(Colors.transparent),
      elevation: MaterialStateProperty.all(0),
      shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
      side: const BorderSide(width:2, color:Colors.blue), 
      )));

  static final ButtonStyle ElevatedButtonBlueStyle = ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
      shadowColor: MaterialStateProperty.all<Color>(Colors.transparent),
      elevation: MaterialStateProperty.all(0),
      shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
      side: const BorderSide(width:2, color:Colors.blue), 
      )));
} 

Now I get this result

enter image description here

How can I customize my action buttons so that they are on the same line and occupy the same distance in size and padding?

   import 'dart:ui';
    import 'package:flutter/material.dart';
    import '../../theme/style_font.dart';
    
    showAlertDialogWin(BuildContext context, state) {
    
      Widget Button1 = ElevatedButton(
          style: AlerDialogElevatedButtonStyle.ElevatedButtonFullBlueStyle,
        child: Row(
          children: const [
            Text("Button1"),
            SizedBox(width: 10,),
            Icon(Icons.star, color: Colors.white)
          ],
        ), 
        onPressed: () {}
      );
    
      Widget Button2 =  ElevatedButton(
        style: AlerDialogElevatedButtonStyle.ElevatedButtonBlueStyle,
        child: Row(
          children: [
            const Text("Button2", style: AlertDialogTitleFontStyle.BlueTextStyle),
              SizedBox(width: 10,),
            Icon(Icons.star, color: Colors.blue)
          ],
        ),
        onPressed:() => Navigator.pop(context),
      );
    
      AlertDialog alert = AlertDialog(
              shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    side: BorderSide(width:4, color:Colors.lightGreenAccent)),
        // backgroundColor: Colors.green,
        title: const Center(
          child: Text("TITLE",style: AlertDialogTitleFontStyle.TitleWinStyle)),
        content:  Column(
              mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              children: const [
                Text('Text content',style: AlertDialogContentFontStyle.ContentTitleStyle),  
         
              ],
            ),
            const SizedBox(height:10),
          ],
        ),
      
        actions: [
          Button1,
          Button2,
          ],
      );
    
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return BackdropFilter (  
          filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6), 
          child: alert );
        },
      );
    }

CodePudding user response:

Some workaround could be this:

actions: [
            Row(
              children: [
                Expanded(child: Button1),
                SizedBox(
                  width: 12,
                ),
                Expanded(child: Button2),
              ],
            ),
          ],
  • Related