250x250
Notice
12-08 02:11
관리 메뉴

막내의 막무가내 프로그래밍 & 일상

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

플러터(Flutter) & Dart

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

막무가내막내 2022. 5. 7. 22:21
728x90

 

 

 

 

 

 

 

[이전학습]

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

 

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

[이전학습] https://youngest-programming.tistory.com/685 [Flutter] Udemy 플러터 강의 섹션 12 학습 (BMI Calculator - Building Flutter for intermediates) [이전학습] https://youngest-programming.tistor..

youngest-programming.tistory.com

 

[참고]

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

 

The Complete 2021 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

 

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

 

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

Learning About Flutter (플러터 공부). Contribute to mtjin/flutter-practice development by creating an account on GitHub.

github.com

 

 

 

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

 

 

 


 

[프로젝트]

 

 


 

 

[메모]

 

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

DropDownButton 사용법

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

 

DropdownButton class - material library - Dart API

A material design button for selecting from a list of items. A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item. One ancestor must be

api.flutter.dev

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

 

docs.flutter.dev

 

쿠퍼티노 위젯 중 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(),
),

 

 

 


 

 

 

 

 

 

 

728x90
0 Comments
댓글쓰기 폼