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
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),
],
),
],