[Flutter_study] Section 7 review

● Expanded class

: 수평, 수직 공간을 최대한 채우려고함

 

● Button 종류/사용법

https://flutter.dev/docs/development/ui/widgets/material#Buttons

Material Components widgets

 

● StatefulWidget VS StatelessWidget

 

- StatefulWidget

: 버튼을 누르거나 터치했을 때 화면에 변경된 내용을 표시할 수 있는 위젯

• createState()
  상태를 생성.
• build()
  위젯을 화면에 표시하는 메서드
  화면에 표시할 위젯을 반환 해야한다
• setState()
  위젯의 상태를 갱신
  이 메서드를 실행하면 위젯을 처음부터 다시 만들지만 initState() 메서드는 호출되지 않음
  데이터가 변경되었음을 프레임워크에 알리는데 사용되며 build context의 위젯을 다시 빌드하게 함

- StatelessWidget

• 화면 표시용 위젯
• 위젯이 로딩되어 화면에 표시되면, 사용자 이벤트나 동작이 있어도 내용을 변경할 수 없는 위젯
• Stateless 위젯을 만들기 위해서는 먼저 StatelessWidget 클래스를 상속하고 build() 메서드에서 원하는 위젯을 반환
• 안드로이드 스튜디오에서 stless치고 나오는 자동완성을 하면 자동으로 완성됨

[참고]

https://velog.io/@cpcp127/Flutter-Stateless-Stateful-%EC%9C%84%EC%A0%AF

 

● 주사위 앱 소스코드

 

import 'dart:math';
 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}
 
//상태 저장 위젯
class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}
 
class _DicePageState extends State<DicePage> {
  var leftDiceNumber=1;
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: FlatButton(
              onPressed: (){
                setState((){
                  leftDiceNumber=Random().nextInt(6) +1;
                  print('diceNumber = $leftDiceNumber');
                });
              },
              child: Image.asset('images/dice$leftDiceNumber.png'),
            ),
          ),
          Expanded(
            child: FlatButton(
              onPressed: (){
                print('Right button got pressed. ');
              },
              child: Image.asset('images/dice1.png'),
            ),
          ),
        ],
      ),
    );
  }
}

 

● 실행 결과

실행결과