[노마드코더: Flutter 로 웹툰 앱 만들기] #3.8 Reusable Cards

Transform.scale 몇 배만 큼 그게 할 것인지 
그리고 그 안의 child에 들어가는 transform. Translate() 는 
x축 y축으로 얼만큼 옮길 것인지를 정한다.

 그리고 overflow한 부분을 자르기 위해서 
Container 하위에 Clip clipBehavior를 넣음으로서 자른다. 
clipBehaviour : Clip.hardEdge, 깔끔하게 자르게 한다. 

\

reusable한 기능을 사용하기 위해서 crurency_card.dart 파일을 생성하고 

import 'package:flutter/material.dart';

class CurrencyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        color: const Color(0xFF1F2123),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 22,
          horizontal: 30,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Euro',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.8),
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                    )),
                const SizedBox(
                  height: 10,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('6 428',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 20,
                        )),
                    Padding(
                      padding: const EdgeInsets.only(left: 10.0),
                      child: Text('EUR',
                          style: TextStyle(
                            color: Colors.white.withOpacity(0.5),
                            fontSize: 17,
                          )),
                    ),
                  ],
                ),
              ],
            ),
            Transform.scale(
              scale: 2.2,
              child: Transform.translate(
                offset: const Offset(-5, 12),
                child: const Icon(
                  Icons.euro_rounded,
                  size: 98,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Card를 생성했던 Container 포함 하위 코드들을 이동시킨다.

그리고 계속 변경되어야 하는 값은 
Currency (화폐) / 금액+화폐 / 화폐아이콘 이다.

 

final bool isInverted;

해당 부분을 생성자 변수로 넣어서, isInverted가 true라면 
색상을 변경해주는 단계를 currency_card.dart에 추가해준다.

중간에 콘솔창에

Hot reload was rejected: Const class cannot remove fields:

이런 에러가 떴는데............ 껐다 키니까 해결 ㅋ

---

이렇게 화면 내에서 overflow 현상이 발생하면 사용자가 스크롤할 수 있게 해야 한다.

그 때 사용할 수 있는 Widget이

SingleChildScrollView

 

body : 바로 뒤에 씌워준다

overflow warning이 사라지는 걸 알 수 있다. 

 

하지만 우리는 카드끼리 살짝씩 겹치게 올리는 과정을 할 것이다. 
Transform.translate를 이용해서! 
아래처럼 박스를 x, y 축 얼마만큼 옮길지 설정한다.

 Transform.translate(
	offset: const Offset(0, -40),
    child: const CurrencyCard(
        name: 'Dollar',
        code: 'USD',
        amount: '55 622',
        icon: Icons.attach_money,
        isInverted: false,
    ),
),

 

---

마무리 해당 코드를 통해서 오늘 이런 결과까지 만들어 봤다

뿌듯

import 'package:flutter/material.dart';
import 'package:toonflix/widgets/Button.dart';
import 'package:toonflix/widgets/currency_card.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: const Color(0xFF181818),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 50,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      const Text('Hey, Selena',
                          style: TextStyle(
                            fontSize: 30,
                            color: Colors.white,
                            fontWeight: FontWeight.w800,
                          )),
                      Text(
                        'Welcome back',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.6),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              const SizedBox(
                height: 40,
              ),
              Text('Total Balance',
                  style: TextStyle(
                    fontSize: 22, //pixel
                    color: Colors.white.withOpacity(0.8),
                  )),
              const SizedBox(
                height: 5,
              ),
              const Text('\$5 194 482',
                  style: TextStyle(
                    fontSize: 48, //pixel
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  )),
              const SizedBox(
                height: 30,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  // MyButton(),
                  Button(
                    text: 'Transfer',
                    bgColor: Color(0xFFF1B33B),
                    textColor: Colors.black,
                  ),
                  Button(
                    text: 'Request',
                    bgColor: Color(0xFF1F2123),
                    textColor: Colors.white,
                  ),
                ],
              ),
              const SizedBox(
                height: 50,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text('Wallets',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 36,
                        fontWeight: FontWeight.w600,
                      )),
                  Text('View All',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.8),
                        fontSize: 15,
                        fontWeight: FontWeight.w600,
                      )),
                ],
              ),
              const SizedBox(
                height: 15,
              ),
              //Card
              const CurrencyCard(
                name: 'Euro',
                code: 'Eur',
                amount: '6 428',
                icon: Icons.euro_rounded,
                isInverted: false,
              ),
              Transform.translate(
                offset: const Offset(0, -20),
                child: const CurrencyCard(
                  name: 'Bitcoin',
                  code: 'BTC',
                  amount: '9 229',
                  icon: Icons.currency_bitcoin,
                  isInverted: true,
                ),
              ),
              Transform.translate(
                offset: const Offset(0, -40),
                child: const CurrencyCard(
                  name: 'Dollar',
                  code: 'USD',
                  amount: '55 622',
                  icon: Icons.attach_money,
                  isInverted: false,
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

---

 

다음 시간에는 과제 같은 게 있는 모양이닷