[Card UI] 전체코드

1. main.dart

//메인

import 'package:flutter/material.dart';
import 'button.dart';
import 'card.dart';

class Player{
  String name;
  Player({required this.name});
}

void main() {
  var jiwoo = Player(name: "jiwoo");
  runApp(App());
}

class App extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF181818),
        body: SingleChildScrollView( //화면에 오버플로우가 발생했을때 스크롤 할 수 있도록 해주는 기능
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),

            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children:[
                SizedBox(
                  height: 30,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children:[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children:[
                        Text('Hey, Selena',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 38,
                                fontWeight: FontWeight.w600
                            )
                        ),
                        Text('Welcome back',
                            style: TextStyle(
                                color: Colors.white.withOpacity(0.8), //Color.fromRGB(255,255,255,0.8) 이렇게 적어도 됨
                                fontSize: 18
                            )
                        ),
                      ],
                    )
                  ],
                ),
                SizedBox(
                  height: 40,
                ),
                Text(
                  'Total Balance',
                  style: TextStyle(
                    fontSize: 22,
                    color: Colors.white.withOpacity(0.8),
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                Text(
                  '\$5 194 482',
                  style: TextStyle(
                    fontSize: 48,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, //버튼들 사이에 공간 두기
                  children: [
                    Button(text: 'Transfer',
                      bgColor: Color(0xFFF1B33B),
                      textColor: Colors.black,
                    ),
                    Button(text: 'Request',
                      bgColor: Color(0xFF1F2123),
                      textColor: Colors.white,
                    ),
                  ],
                ),
                SizedBox(height: 50,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children:[
                    Text('Wallets',
                        style:TextStyle(
                          color:Colors.white,
                          fontSize:36,
                          fontWeight: FontWeight.w600,
                        )),
                    Text('View All',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.8),
                        fontSize: 18,
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height:20,
                ),
                CurrencyCard(
                  name:'Euro',
                  code:'EUR',
                  amount: '6 428',
                  icon: Icons.euro_rounded,
                  isInverted: false,
                ),
                Transform.translate(
                  offset: Offset(0,-20), //카드들을 포개서 두기 위해서
                  child: CurrencyCard(
                    name:'Bitcoin',
                    code:'BTC',
                    amount: '9 785',
                    icon: Icons.currency_bitcoin,
                    isInverted: true,
                  ),
                ),
                Transform.translate(
                  offset: Offset(0,-40),  //카드들을 포개서 두기 위해서
                  child: CurrencyCard(
                    name:'Dollar',
                    code:'USA',
                    amount: '428',
                    icon: Icons.attach_money_outlined,
                    isInverted: false,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

2. button.dart

//statelessWidget을 누르기만 하면 작성이 간단히 되긴 함

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Button extends StatelessWidget{
  final String text;
  final Color bgColor;
  final Color textColor;

  Button({
    super.key,
    required this.text,
    required this.bgColor,
    required this.textColor
  }); //이또한 Code Actions를 통해 작성 가능

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(45),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 25,
          horizontal: 40,
        ),
        child: Text(
          text,
          style: TextStyle(
            color: textColor,
            fontSize: 22,
          ),
        ),
      ),
    );
  }


}

 

3. card.dart

//card class

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CurrencyCard extends StatelessWidget{

  final String name, code, amount;
  final IconData icon;
  final bool isInverted;

  final _blackColor = const Color(0xFF1F2123);

  const CurrencyCard({
    super.key,
    required this.name,
    required this.code,
    required this.amount,
    required this.icon,
    required this.isInverted,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge, //컨테이너(카드) 밖 부분을 잘라내는 역할
      decoration: BoxDecoration(
        color: isInverted ? Colors.white :_blackColor,
        borderRadius: BorderRadius.circular(25),
      ),
      child: Padding(
        padding: const EdgeInsets.all(30
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children:[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children:[
                Text(name,
                  style: TextStyle(
                    color: isInverted? _blackColor: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height:10,
                ),
                Row(
                  children:[
                    Text(amount,
                      style: TextStyle(
                        color: isInverted? _blackColor:Colors.white,
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(code,
                      style: TextStyle(
                        color: isInverted? _blackColor: Colors.white.withOpacity(0.8),
                        fontSize: 20,
                      ),),
                  ],
                )
              ],
            ),

            Transform.scale(
              scale:2.2, //부모와 관계없이 크기를 키움
              child: Transform.translate(
                offset: Offset(-5,12), //아이콘을 어디에 위치 시킬 것인지 결정
                child: Icon(
                  icon, //아이콘의 모양은 미리보기로 보기 가능
                  color: isInverted? _blackColor:Colors.white,
                  size: 98,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}

 

*실행화면