[Flutter] Udemy 플러터 강의 섹션 14 학습 (Boss Level Challenge 3 - Bitcoin Tricker)

 

 

 

 

 

 

 

[이전학습]

https://youngest-programming.tistory.com/692

[Flutter] Udemy 플러터 강의 섹션 13 학습 (학습중 3시간18분 강의) (Clima - Powering Your Flutter App with Live W

 

[참고]

https://www.udemy.com/course/flutter-bootcamp-with-dart/

The Complete 2021 Flutter Development Bootcamp with Dart

 

https://github.com/mtjin/flutter-practice

GitHub - mtjin/flutter-practice: Learning About Flutter (플러터 공부)

 

 

 

이전 포스팅들과 다르게 이번 포스팅부터는 시간절약과 필요한 부분만 보기위해 강의챕터마다 모두 기록하는게 아닌 필요한 부분만 부분적으로 메모하는 방식으로 포스팅을 진행하려고 한다.

 

 

 

---

 

[프로젝트]

 

 

---

 

 

[메모]

 

안드로이드 머터리얼 디자인의 위젯 중 하나를 사용해봤다. 

DropDownButton 사용법

https://api.flutter.dev/flutter/material/DropdownButton-class.html

DropdownButton class - material library - Dart API

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: DropdownButton<String>(
    value: selectedCurrency,
    items: [
      DropdownMenuItem(
        child: Text('USD'),
        value: 'USD',
      ),
      DropdownMenuItem(
        child: Text('EUR'),
        value: 'EUR',
      ),
      DropdownMenuItem(
        child: Text('GBP'),
        value: 'GBP',
      ),
    ],
    onChanged: (value) {
      setState(() {
        selectedCurrency = value;
      });
    },
  ),
),

---

 

Flutter Dart 반복문 for 사용법

코틀린이나 자바와 크게 다를점이 없었다.

 

방법1

List<DropdownMenuItem> getDropdownItems() {
  List<DropdownMenuItem<String>> dropdownItems = [];
  for (int i = 0; i < currenciesList.length; i++) {
    String currency = currenciesList[i];
    var newItem = DropdownMenuItem(
      child: Text(currency),
      value: currency,
    );
    dropdownItems.add(newItem);
  }
  return dropdownItems;
}

 

방법2

List<DropdownMenuItem> getDropdownItems() {
  List<DropdownMenuItem<String>> dropdownItems = [];
  for (String currency in currenciesList) {
    var newItem = DropdownMenuItem(
      child: Text(currency),
      value: currency,
    );
    dropdownItems.add(newItem);
  }
  return dropdownItems;
}

 

 

---

 

 

Cupertino (iOS-style) widgets

안드로이드에 머터리얼 디자인이 있다면 IOS에는 쿠퍼티노 디자인이 있다.

https://docs.flutter.dev/development/ui/widgets/cupertino

Cupertino (iOS-style) widgets

 

쿠퍼티노 위젯 중 CupertinPicker 를 사용해봤다.

 

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: CupertinoPicker(
    backgroundColor: Colors.lightBlue,
    itemExtent: 32.0,
    onSelectedItemChanged: (selectedIndex) {
      print(selectedIndex);
    },
    children: getPickerItems(),
  ),

 

 

 

---

IOS , Android 프레임워크 구별하여 디자인 구현하는 방법

io패키지에 있는 Platform 클래스를 사용한다.

import 'dart:io' show Platform;

Container(
  height: 150.0,
  alignment: Alignment.center,
  padding: EdgeInsets.only(bottom: 30.0),
  color: Colors.lightBlue,
  child: Platform.isIOS ? iOSPicker() : androidDropdown(),
),

 

 

 

---