Reputation: 2186
I want to center my column text and I also want to my dialog background color changed. how to do this.
I want to center my column text and I also want to my dialog background color changed. how to do this.
This is my dialog code.
import 'package:bellaz/Extension/AppColor.dart';
import 'package:bellaz/Utils/Constants.dart';
import 'package:flutter/material.dart';
class LocationDialog extends StatelessWidget {
dialogContent(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
SizedBox(height: 20,),
Image.asset(
"lib/Assets/searchYellow.png",
height: 50,
width: 50,
),
Align(
alignment: Alignment.center,
child: Text(
"Device location is not enabled",
style: TextStyle(
fontSize: t2Size,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(height: 16.0),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Please enable device location to ensure accurate nearby salons location for easy search",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: t3Size,
color: extraLightColor),
),
],
),
SizedBox(height: 24.0),
Container(
padding: EdgeInsets.symmetric(vertical: 14),
decoration: BoxDecoration(color: appGreenColor,
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.my_location_rounded,
color: Colors.white,
),SizedBox(width: 7,),
Text(
'Enable Device Location',
style: TextStyle(color: Colors.white,fontSize: t3Size),
)
],
),
),
SizedBox(height: 4.0),
Container(
padding: EdgeInsets.symmetric(vertical: 14),
decoration: BoxDecoration(color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"lib/Assets/searchYellow.png",
height: 23,
width: 23,
),
SizedBox(width: 7,),
Text(
'Enter Location Manually',
style: TextStyle(color: appYellowColor),
)
],
),
),
SizedBox(height: 20.0),
],
),
);
}
@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 0.0,
backgroundColor: ,
child: dialogContent(context),
);
}
}
how to center this text and I also want to change background color which is transparent showing
This is my actual UI, I want to make like this
Upvotes: 1
Views: 1159
Reputation: 14785
Try to remove your second Column Widget and give TextAlign.center
Text(
"Please enable device location to ensure accurate nearby salons location for easy search",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 17,
color: Colors.black),
textAlign: TextAlign.center,
),
Upvotes: 1
Reputation: 235
=> You Have to Add textAlign: TextAlign.center This Line Of All Text Widget You can See Below Example.
Ex :
Text("Please enable device location to ensure accurate nearby salons locatio for easy search",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 22,
color: Colors.blue),
textAlign: TextAlign.center,
),
Upvotes: 2