플러터 - 앱 개발 따라하기 - UI / 커스텀 위젯 (feat. 노마드코더)
플러터를 공부하면서, 강의도 보면서 따라 앱 만들기를 하고 있다.
[따라하기의 필수는 가능한 직접 타이핑 한다]
여러강의를 보면서 따라하고, 진행상황을 정리하고자 한다.
이번은 노마드코더 님의 강의 중 한 부분을 따라했다.
https://nomadcoders.co/flutter-for-beginners/lectures/4139 (3강 UI Challenge )
* 깃허브에 기본강의 + 나름의 개선 사항을 적용해봤다.
https://github.com/1day1/flutter-practice-toonflix
wallet 의 카드 부분을 커스텀 위젯으로 만들고, 이 부분을 또 데이터를 넘겨서 처리해봤다.
https://github.com/1day1/flutter-practice-toonflix/blob/main/lib/widgets/wallet.dart
typedef WalletData = ({
String text1,
String amount,
String text3,
IconData curIcon,
bool isInverted
});
typedef 로 데이터를 정의하고 ( C/go 등의 구조체 -struct- 와 비슷한 것 같다) 해당 데이터를 List 화 한 후 넘겨주었다.
walletDatas: [
(
text1: 'Euro',
amount: '6 234',
text3: 'EUR',
curIcon: Icons.euro_rounded,
isInverted: false,
),
(
text1: 'Dollar',
amount: '55 124',
text3: 'USD',
curIcon: Icons.attach_money_outlined,
isInverted: true,
),
(
text1: 'Bitcoin',
amount: '1.2894',
text3: 'BTC',
curIcon: Icons.currency_bitcoin_outlined,
isInverted: false,
)
]
[추가 개선할 부분]
1) curIcon 과 isInverted 도 값을 넘겨줄 필요없이, 내부적으로 처리한다.
2) text1 / text3 도 한쪽만 값을 보내서 처리한다.
=> https://github.com/1day1/flutter-practice-toonflix/commit/ab019691a70aa38a9908cee2a543c351ca51ec59
currencyInfo 를 내부 데이터로 처리했는데, 2차원 Map 의 접근은 못하나?
(예를 들어 currencyInfo['USD']['currency'] 로 바로 접근이 되면 좋은데, 못 찾겠다.)
일단 singleWhere 로 처리함.
3) 위 값을 json 타입으로 가져온다(외부 연동 염두)
=> https://github.com/1day1/flutter-practice-toonflix/commit/2d812367e535f296a8d55b6ec04d29a0c525637e
json 파일을 불러와서 보여지도록 조치함.
[일단 여기까지 다른 강의 따라하기로 ..]
'배우는일' 카테고리의 다른 글
플러터 - 앱 개발 따라하기 - shared_preferences (feat. 노마드코더) (0) | 2024.02.15 |
---|---|
플러터 - 앱개발 따라하기 - UI / 타이머 / 온보딩 (feat. 노마드코더) (0) | 2024.02.15 |
flutter doctor - Xcode 이슈 (0) | 2024.01.21 |
맥에서 npm 을 설치하려면 어떤게 좋을까? (0) | 2018.08.20 |
vagrant 나만의 패키지 box 를 만들어 보자. (0) | 2014.07.31 |
WRITTEN BY
- 1day1
하루하루 즐거운일 하나씩, 행복한일 하나씩 만들어 가요.