[Flutter - 2team] Section 7: Dicee

Flutter 강의 Section 7에서는 Dicee 앱을 만드는 것이다.

 

배운 내용은 다음과 같다.

 

- stateless & stateful

- Expanded widget

- Flutter Button

- Dart Valuable

- Dicee 앱

 

<stateless&stateful>

	stateless	stateful
state	state를 관리 X	state를 관리 O
setState()	없다	있다
사용	stless	stful

 

 

<Expanded widget>

Expanded widget은 주축으로 확장 가능한 만큼 확장 시켜주는 위젯이다. 사용하기 위해서는 어떤 위젯의 child 여야하고, 사용은 Expanded() 와 같은 형식으로 사용한다.

 

<Flutter Buttons>

Flutter는 이렇게나 다양한 버튼들을 제공하고 있다.

자세한 내용은 Flutter 사이트를 참고하면 좋을 것 같다. 

(사이트 : flutter.dev/docs/development/ui/widgets/material#Buttons )

 

<Dart Valuable>

(1) var type

    var type은 타입 추론을 통해 데이터 형태에 맞게 변수를 적용할 수 있다.

    ex) var name = 'dart';

    

    하지만 한번 결정된 데이터 타입은 바뀔 수 없다.

    ex) var num = 123;

        num = 'dart'; (오류 발생)

 

(2) String type

    String type은 문자열 데이터 타입이다. 사용할 때 ("",'' 둘 다 사용 가능하다.)

    ex) String name = "dart";

         String name = 'dart';

 

(3) int type

    정수형 데이터 타입이다.

    ex) int num = 1;

 

(4) double type

    실수형 데이터 타입이다.

    ex) double number = 1.5;

 

(5) bool type

    논리형 data type이다. (true ,or false)

    ex) bool logic = true;

         bool logic = false;

 

(6) dynamic type

    동적으로 데이터 형태에 맞게 변수를 적용한다.

    ex) dynamic num = 123;

         num = 'dynamic'; (가능)

 

(7) num type

    int와 double을 포함한다.

    ex)

//타 언어(java)의 경우 자동 형변환이 이루어진다.
int x = 5;
double y = x;

//dart는 형변환을 해줘야한다. num을 이용하면 int, double 상관없이 사용 가능하다.
num y = x;

 

(8) Dart 함수

    - Dart 함수 만들기

      [반환 형태] [함수명] (인수) {함수 내용}

      ex) void buy(int money) {//somthing }

 

    - Dart 함수 사용하기

      buy(인수); 의 형태로 사용한다.

 

<Dicee 앱>

(1) 코드 작성

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

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    backgroundColor: Colors.red,
    appBar: AppBar(
      backgroundColor: Colors.red[700],
      title: Center(
        child: Text(
          'Dice',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontFamily: 'Pacifico',
            fontSize: 26,
          ),
        ),
      ),
    ),
    body: DicePage(),
  )));
}

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  int diceLeftNumber = 6, diceRightNumber = 6;

  void diceAllNumber(){
    setState(() {
      diceLeftNumber = Random().nextInt(6) + 1;
      diceRightNumber = Random().nextInt(6) + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Expanded(
            child: FlatButton(
              onPressed: () {
                diceAllNumber();
              },
              child: Image.asset('images/dice$diceLeftNumber.png'),
            ),
          ),
          Expanded(
            child: FlatButton(
              onPressed: () {
                diceAllNumber();
              },
              child: Image.asset('images/dice$diceRightNumber.png'),
            ),
          ),
        ],
      ),
    );
  }
}

(2) 실행 화면

사진은 6장 그림 재활용했습니다.

 

강의: www.appbrewery.co/p/flutter-development-bootcamp-with-dart

The Complete Flutter Development Bootcamp with Dart

원글: luke-computer.tistory.com/4

Flutter Section 7: Dicee (Instructor. Angela Yu)