Flutter组件颜色不符合规格显示偏浅问题排查（Scaffold背景为白色）

我开发的Flutter应用中，组件颜色与设计规格不符，呈现出偏浅的状态。目前已将Scaffold的背景色设置为白色，相关代码及显示效果如下：

Container(
                height: 45,
                width: 272,
                decoration: const BoxDecoration(
                  color: Color.fromARGB(66, 15, 129, 19),
                  borderRadius: BorderRadius.all(
                    Radius.circular(22),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const SizedBox(
                      height: 24,
                      width: 24,
                      child: Image(
                        image: AssetImage('assets/Google_logo.png'),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        BlocProvider.of<AuthCubit>(context).loginWithGoogle();
                      },
                      child: const Text(
                        'Log in with Google',
                        style: TextStyle(fontSize: 17, color: Colors.white),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 15,
              ),
              SizedBox(
                height: 45,
                width: 272,
                child: Container(
                  decoration: const BoxDecoration(
                    color: Color.fromARGB(66, 76, 175, 79),
                    borderRadius: BorderRadius.all(
                      Radius.circular(22),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(
                        height: 24,
                        width: 24,
                        child: Image(
                          image: AssetImage('assets/Microsoft_logo.png'),
                        ),
                      ),
                      TextButton(
                        onPressed: () {
                          BlocProvider.of<AuthCubit>(context).loginWithMS();
                        },
                        child: const Text(
                          'Log in with Microsoft',
                          style: TextStyle(fontSize: 17, color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(
                height: 7,
              ),
              const Text(
                'OR',
                style: TextStyle(color: Colors.black),
              ),
              const SizedBox(height: 7),
              Form(
                key: _formKey,
                child: SingleChildScrollView(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 464, vertical: 0),
                    child: Column(
                      children: [
                        TextFormField(
                          key: const ValueKey('email'),
                          validator: (value) {
                            if (value!.isEmpty || !value.contains('@')) {
                              return 'Please enter a valid email';
                            }
                            return null;
                          },
                          keyboardType: TextInputType.emailAddress,
                          decoration: InputDecoration(
                            floatingLabelBehavior: FloatingLabelBehavior.always,
                            labelText: 'Email Address',
                            enabledBorder: OutlineInputBorder(
                              borderSide: const BorderSide(color: Colors.black),
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          onSaved: (newValue) {
                            _userEmail = newValue!;
                          },
                        ),
                        const SizedBox(
                          height: 12,
                        ),
                        TextFormField(
                          key: const ValueKey('password'),
                          validator: (value) {
                            if (value!.isEmpty || value.length < 7) {
                              return 'Password must be atleast 7 characters';
                            }
                            return null;
                          },
                          decoration: InputDecoration(
                            floatingLabelBehavior: FloatingLabelBehavior.always,
                            labelText: 'Password',
                            enabledBorder: OutlineInputBorder(
                              borderSide: const BorderSide(color: Colors.black),
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          obscureText: true,
                          onSaved: (newValue) {
                            _userPassword = newValue!;
                          },
                        ),
                        const SizedBox(
                          height: 20,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 2,
              ),
              SizedBox(
                height: 45,
                width: 272,
                child: ElevatedButton(
                    style: const ButtonStyle(
                        backgroundColor: MaterialStatePropertyAll(
                            Color.fromARGB(78, 2, 114, 6))),
                    onPressed: _trySubmit,
                    child: const Text(
                      'Log in',
                      style: TextStyle(fontSize: 17, color: Colors.white),
                    )),
              ),
              const SizedBox(
                height: 15,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    "Don't have an account yet?  ",
                    style: TextStyle(color: Colors.black),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: (_) => const RegistrationScreen()));
                    },
                    child: const Text(
                      'Sign Up',
                      style: TextStyle(
                          color: Color.fromARGB(85, 8, 95, 167),
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              )

问题原因 #

你使用的Color.fromARGB()构造函数中，第一个参数是alpha透明度值（范围0-255），你设置的66、78、85都是低透明度值，导致颜色叠加在白色背景上后显得偏浅，没有达到设计稿的饱和度。

解决方案 #

将所有颜色的alpha值改为255（完全不透明），以下是几种实现方式：

1. 修改fromARGB的alpha参数
   直接把第一个参数改成255，比如：

   // Google登录按钮颜色修改
   color: Color.fromARGB(255, 15, 129, 19),
   // Microsoft登录按钮颜色修改
   color: Color.fromARGB(255, 76, 175, 79),
   // 登录按钮颜色修改
   backgroundColor: MaterialStatePropertyAll(Color.fromARGB(255, 2, 114, 6)),
   // Sign Up文字颜色修改
   color: Color.fromARGB(255, 8, 95, 167),
   

2. 使用十六进制颜色值
   直接用完全不透明的十六进制颜色（FF开头），对应RGB值转换后的结果：

   color: const Color(0xFF0F8113), // 对应RGB(15,129,19)
   color: const Color(0xFF4CAF4F), // 对应RGB(76,175,79)
   

3. 使用fromRGBO构造函数
   第四个参数设为1.0（完全不透明）：

   color: Color.fromRGBO(15, 129, 19, 1.0),
   

修改后，组件颜色就会完全匹配设计稿的饱和度，不会再出现偏浅的问题。

内容的提问来源于stack exchange，提问作者MattPrash