Deepak
Deepak

Reputation: 2186

Flutter: Column text want in center

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

enter image description here

This is my actual UI, I want to make like this

enter image description here

Upvotes: 1

Views: 1159

Answers (2)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14785

Try to remove your second Column Widget and give TextAlign.center

Refer TextAlign here and here

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

Your Screen->enter image description here

Upvotes: 1

kk web
kk web

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

Related Questions