如何在Flutter中以相同的配色方案实现此布局？

问题描述

我想在Flutter中开发以下设计，我使用的是Flutter默认颜色，所以我面临的问题是，当我使用颜色为黑色的容器，然后要在该容器中放置一些颜色比黑色浅的小部件时，如您在以下图像中所见，如何解决此问题不可见？

这是一些代码

import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'package:marshal/Payment.dart';

import 'bottomnavigationbar.dart';

class Payment2 extends StatefulWidget {
  @override
  _Payment2State createState() => _Payment2State();
}

class _Payment2State extends State<Payment2> {
  @override
  Widget build(BuildContext context) {
    final PaymentButton = Material(
      elevation: 5.0,borderRadius: BorderRadius.circular(30.0),color: Colors.red,child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,padding: EdgeInsets.fromLTRB(20.0,15.0,20.0,15.0),onpressed: () {
          Route route = MaterialPageRoute(builder: (context) => Paymentdone());
          Navigator.pushReplacement(context,route);
        },child: Text("Payment",textAlign: TextAlign.center,style: style.copyWith(
                color: Colors.white,fontWeight: FontWeight.w800)),),);
    return Scaffold(
      appBar: AppBar(
        title: Text("Payment"),centerTitle: true,body: Container(
        padding: EdgeInsets.all(12),color: Colors.black,child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
            Text(
              "ENTER YOUR CARD DETAILS",style: TextStyle(
                  fontWeight: FontWeight.w400,color: Colors.white,fontSize: 16),Card(
              color: Colors.blueGrey,child: ListTile(
                leading: CircleAvatar(),title: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
                      Text(
                        "MasterCard",style: TextStyle(fontSize: 16,color: Colors.white),Text(
                        '90 \u0024',],child: emailField(),//
//            Row(
//                crossAxisAlignment: CrossAxisAlignment.center,//                children: <Widget>[
//                  Card(
//                    child: Exp_Date(),//                  ),//                  Card(
//                    child: CVV(),//                  )
//                ],//              ),TextField(
              style: style,maxLength: 5,cursorColor: Colors.red,keyboardType: TextInputType.number,decoration: Inputdecoration(
                hintText: 'MM/YY',hintStyle: TextStyle(fontSize: 16,border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),borderSide: BorderSide(
                    width: 0,style: BorderStyle.none,filled: true,contentPadding: EdgeInsets.all(16),//            Exp_Date(),PaymentButton,bottomNavigationBar: BottomNavigation(),);
  }

  Widget emailField() {
    return TextFormField(
      //obscureText: true,style: style,decoration: Inputdecoration(
        contentPadding: EdgeInsets.fromLTRB(20.0,10.0),//labelText: "Card Number",hintText: 'xxxx xxxx 1234',);
  }

  Widget Exp_Date() {
    return TextFormField(
      obscureText: true,decoration: Inputdecoration(
        //  contentPadding: EdgeInsets.fromLTRB(20.0,// labelText: "Exp Date",hintText: "MM/YY",);
  }

  Widget CVV() {
    return TextFormField(
      obscureText: true,//labelText: "CVV",hintText: "CVV",);
  }

  TextStyle style =
      TextStyle(fontFamily: 'Montserrat',fontSize: 16.0);
}

注意

我的BottomNavigationBar没有任何问题

解决方法

使用Color(0xFF1E1E1E)代替Colors.blueGrey。