StatefulWidget

StatefulWidget은 위젯에 변경되는 state 를 담고 있는 커스텀 위젯을 뜻한다.

그럼 어떤식으로 만들어지는 지 살펴보자.

우선 StatefulWidget 을 extends 한다.

class App extends StatefulWidget {
    
}

State를 상속받은 클래스를 만든다.

class AppState extends State<App> {
  int counter = 0;

  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('$counter'),
        appBar: AppBar(
          title: Text("Lets see some images!"),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add), //Widget 추가
          onPressed: () {
            // 이벤트 콜백 함수                        
          },
        ),
      ),
    );
  }
}

createState 함수를 StatefullState 클래스에 정의를 한다.

@override
State<StatefulWidget> createState() {
  // TODO: implement createState
  return AppState(); // 전 단계에서 만든 클래스
}

마지막으로 변경될 값을 setState() 함수내에서 정의한다.

여기에선 floating action button 을 클릭시 counter 를 1씩 올리는 작업이 이루어진다.

....
onPressed: () {
  // 이벤트 콜백 함수            
  setState(() {
    counter += 1; // 1씩 올리고 있다.
  });
},
....          

Scaffold 위젯 추가

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ

기본적으로 모바일 구조가 상단에 Appbar가 있으며 하단에 바텀시트가 있으며 floating action button이 있다.

그 구조를 기본적으로 지원하는 하나의 위젯이 Scaffold라고 보면 된다.

그럼 하나씩 적용해보자.

import 'package:flutter/material.dart';

void main() {
  var app = MaterialApp(
    home: Scaffold(
      appBar: AppBar(),    // 추가  
    ),
  );

  runApp(app);
}

짜잔~ 이런 타이틀바가 생긴걸 볼수 있다. 이걸 AppBar 라고 한다.

그리고 아래 floating button 을 추가도 아주 쉽게 할수 있다.

import 'package:flutter/material.dart';

void main() {
  var app = MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Lets see some images!"),        
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add), //Widget 추가
        onPressed: () { // 이벤트 콜백 함수
          print('Hi there!');
        },
      ),      
    ),
  );

  runApp(app);
}

추가적으로 메테리얼 아이콘을 변경시

https://material.io/tools/icons 에서 검색해서 Icons.*** 변경하면 된다.

Flutter 시작하기.

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ

Flutter는 구글에서 나온 모바일 프레임워크입니다. Reactive Native 와 비슷하다고 보면 될것 같습니다. 네이티브 성격을 가진 하이브리드 앱인 셈이죠.

무엇보다 강력한 점은 각 플랫폼(Android, IOS)에 있는 대표 디자인 즉 메테리얼 디자인을 손쉽게 짤수가 있습니다.

하지만 플랫폼별로 다르게 나올수가 있는데 그 이유는 메테리얼도 플랫폼에 맞게 바뀌어서 나올 수 있기 때문입니다.

만약 IOS 에서 특유의 시스템을 이용하고 싶으면 쿠퍼티노 위젯을 사용하면 됩니다.

그 외에도 안드로이드 스튜디어, 비쥬얼 스튜디어 코드등 통합 IDE 도 사용 가능한 점이 큰 메리트입니다.

더 자세한 내용을 원하시면 공식홈페이지를 방문하시길 바랍니다.

구조

헬로우 플러터를 우선 보는게 중요하죠.

각 플랫폼별로 플러터 프로젝트를 생성합니다.

(vscode 에선 view -> 명령 팔렛트 -> flutter new project 선택)

그리고 실행을 해봅니다. ( 터미널에서 flutter run )

중요한건 화면까지 뛰우는 구조인데.

중요한건 4가지를 보시면 됩니다.

1. import
2. main 함수 생성
3. main에 widget 추가
4. 그 위젯을 화면에 추가

코드로 살펴보겠습니다.

import 'package:flutter/material.dart';

void main() {
  var app = MaterialApp(
    home: Text('Hi there!'),

  );

  runApp(app);
}

그럼 다음과 같이 투박한 화면이 나옵니다. ^^;;

그럼 다음시간에는 좀 더 위젯을 추가하도록 해보겠습니다.