颤振：列文本想要在中心

Posted 2023-02-23

【中文标题】颤振：列文本想要在中心

【英文标题】：Flutter: Column text want in center

【发布时间】：2022-01-17 17:13:26

【问题描述】：

我想将我的列文本居中，并且我还想改变我的对话框背景颜色。 如何做到这一点。

---

我想将我的列文本居中，并且我还想改变我的对话框背景颜色。 如何做到这一点。

这是我的对话代码。

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

如何使文本居中，我还想更改透明显示的背景颜色

这是我的实际用户界面，我想做这样的

这对我有用。

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

【问题讨论】：

如果你想要蓝色或彩色背景，你可以使用 imageFilter

【参考方案1】：

=> 你必须添加 textAlign: TextAlign.center This Line Of All Text Widget 你可以看下面的例子。

例如：

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

【参考方案2】：

请参考以下代码

 Text(
              "Please enable device location to ensure accurate nearby salons locatio for easy search",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 22,
                  color: Colors.blue),
            ),

【参考方案3】：

尝试删除您的第二个列小部件并提供TextAlign.center

参考 TextAlign here 和 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,
        ),

你的屏幕->

【参考方案4】：

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