如何解决如何在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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。