Flutter - StatelessWidget & StatefulWidget

이번학기 디자이너로서 개발능력과 개발자와의 커뮤니케이션 능력 향상을 위해 내가 디자인해서 내가 코딩한다(내디내코) 스터디팀을 기획해서 한달동안 포트폴리오 사이트를 구현했다.

html과 css, javascript에 대한 이해를 어느 정도 가질 수 있었지만, 해당 능력으로 만족할만한 어떤 제품이나 결과물을 만들려면 엄청 큰 노력과 시간이 필요하겠다는 생각이 들었다.

 

마침 이번학기 모바일앱개발 수업에서 flutter를 사용한다는 얘기를 듣고, 내가 디자인한 어플을 실제로 개발해보고 싶다는 생각을 하게 됐다. ios와 안드로이드 제품을 동시에 개발할 수 있고 개발시간이 굉장히 단축될 수 있다는 장점이 나에게 큰 매리트로 다가왔기에 바로 맨땅에 헤딩으로 플러터를 파보고 있다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return MaterialApp(
        	title:'Welcome to Flutter',
            home: Scaffold(
            	appBar: AppBar(
                	title: Text('Welcome to Flutter'),
                ), //AppBar
                body: Center(
                	child: Text('Hi my name is Minwoo'),
                ), //Center
            ), //Scaffold
        ); //MaterialApp
    }
}
//mian.dart 파일 코드

 



ios 시뮬레이터(좌) , 안드로이드 시뮬레이터(우)

위와 같은 코드로 왼쪽의 시뮬레이터 화면을 바로 생성할 수 있었다.

 

import 'package:flutter/material.dart';

위에 서술한 것처럼 안드로이드와 ios환경을 둘다 지원하기 위해 내부 라이브러리에 안드로이드 매테리얼 디자인 시스템과  ios 쿠퍼티노를 import해서 사용할 수 있다. MaterialApp을 리턴해주기 위해서는 작성해야한다.

 

메인값에 들어가는 MyApp은

StatelessWidget을 상속받고 있다.

플러터에서 State란 프로젝트에서 사용되는 데이터들을 말한다. state는 두 가지로 나눌 수 있는데

App state는 앱 전체에서 사용되는 state, Widget state는 위젯 내부에서만 사용되는 state를 말한다.

 

그렇다면 MyApp이 상속받고 있는 StatelessWidget은 무엇?

변경될 정보가 없는 위젯을 상속하는 것을 의미한다. 위 화면처럼 텍스트나 앱바와 같이 변경될 일이 없는 위젯들은 statelessWidget으로 제어할 수 있다. 내부에 들어가는 모든 데이터들은 변하지 않는 형식으로 있어야한다.

 

 

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
  ...

 

반대로 변화가 생기는 값들이 있다면, StatefulWidget을 상속하여 제어할 수 있다.

StatefulWidget 안에는 2개의 클래스가 존재한다. 코드를 업데이트 할때마다 모든 데이터가 초기화되기 때문에

그것을 막아줄 변하지 않는 클래스인 statefulWidget부분과(위 HomePage 클래스) HomePage의 제네릭 클래스인 State를 상속한 

데이터가 변하는 클래스(위 _HomePageState 클래스). 이렇게 2가지 클래스가 존재한다.

Flutter에서는 오브젝트 앞에 _ 를 붙히면 private으로 생성할 수 있다.