本文主要介绍金融应用程序的 UI

在本教程中,我将向您展示如何使用 Flutter 和 android studio

class CreditCard extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    final bottom = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
        padding: EdgeInsets.only(bottom: bottom),
        reverse: true,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(12.0,12.0,12.0,0),
            child: Column(
              children: <Widget>[
               Card(
                 child: Stack(
                   children: <Widget>[
                     Image.asset("assets/credit_card.png",fit: BoxFit.fill,),
                     Padding(
                       padding: const EdgeInsets.all(18.0),
                       child: Column(
                         mainAxisAlignment: MainAxisAlignment.center,
                         crossAxisAlignment: CrossAxisAlignment.stretch,
                         children: <Widget>[
                           Padding(
                             padding: const EdgeInsets.symmetric(vertical:16.0, horizontal: 8.0),
                             child: Text(
                                 "**** **** **** 6543",
                               style: TextStyle(
                                 fontSize: 28.0,
                                 color: Colors.white
                               ),
                             ),
                           ),
                           SizedBox(
                             height: 20.0,
                           ),
                           Row(
                             children: <Widget>[
                               Column(
                                 children: <Widget>[
                                   Text(
                                     "Expiry",
                                     style: TextStyle(
                                       color: Colors.white,
                                       fontSize: 22.0
                                     ),
                                   ),
                                   SizedBox(
                                     height: 10.0,
                                   ),
                                   Text(
                                     "MM/YY",
                                     style: TextStyle(
                                       color: Colors.white,
                                       fontSize: 18.0,
                                     ),
                                   )
                                 ],
                               ),
                               SizedBox(
                                 width: 50.0,
                               ),
                               Column(
                                 children: <Widget>[
                                   Text(
                                     "CVV",
                                     style: TextStyle(
                                         color: Colors.white,
                                         fontSize: 22.0
                                     ),
                                   ),
                                   SizedBox(
                                     height: 10.0,
                                   ),
                                   Text(
                                     "****",
                                     style: TextStyle(
                                       color: Colors.white,
                                       fontSize: 18.0,
                                     ),
                                   )
                                 ],
                               )
                             ],
                           ),
                           SizedBox(
                             height: 8.0,
                           ),
                           Text(
                             "Card Holder",
                             style: TextStyle(
                               color: Colors.white,
                               fontSize: 28.0
                             ),
                             textAlign: TextAlign.end,

                           ),

                         ],
                       ),
                     ),
                   ],
                 ),
                 elevation: 5.0,
                 clipBehavior: Clip.antiAliasWithSaveLayer,
                 semanticContainer: true,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(12.0)
                 ),
               ),
                SizedBox(
                  height: 20.0,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child:Column(
                    children: <Widget>[
                      TextFormField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8.0),
                            borderSide: BorderSide(),
                          ),
                          labelText: "Credit Card Number",
                          labelStyle: TextStyle(
                            fontSize: 18.0
                          )
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      TextFormField(
                        decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(),
                            ),
                            labelText: "Credit Card Expiry Date",
                            labelStyle: TextStyle(
                                fontSize: 18.0
                            )
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      TextFormField(
                        decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(),
                            ),
                            labelText: "Credit Card Code",
                            labelStyle: TextStyle(
                                fontSize: 18.0
                            )
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      TextFormField(
                        decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                              borderSide: BorderSide(),
                            ),
                            labelText: "Credit Card Hodler Name",
                            labelStyle: TextStyle(
                                fontSize: 18.0
                            )
                        ),
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      FlatButton(
                        color: Colors.pink,
                        onPressed: (){},
                        shape: StadiumBorder(),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 12.0),
                          child: Text(
                              "Pay",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 22.0
                            ),

                          ),
                        ),
                      )
                    ],
                  )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}