[Flutter] Flutter Widget 이란 ? (StatelessWidget ,StatefulWidget )

Flutter의 모든 위젯은 StatelessWidget 과 StatefulWidget으로 나눌 수 있어요.

 

StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯

StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget { // StatelessWidget 상태변화가 없어 새로고침이 필요없는것
  const MyApp({Key? key}) : super(key: key);

1.Stateless1Widget 

 

import 'package:flutter/material.dart'; // Material 위젯 가져오기

void main() {
  runApp(const MyApp()); 
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    // 화면에 보여지는 영역
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "안녕 플루터는 처음이지 ? ",
            style: TextStyle(fontSize: 35),
          ),
        ),
      ),
    );
  }
}

 

2. 앱이 실행되는게 보이시죠 ?

 

3.StatefulWidget  ( 상태변화 필요한위젯)

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart'; // Material 위젯 가져오기

void main() {
  print("1. 시작");
  runApp(const MyApp()); // MyApp 위젯으로 Flutter 시작!
}

// StatefulWidget의 기능을 물려받음
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

// MyApp의 상태를 나타내는 클래스
class _MyAppState extends State<MyApp> {
  int number = 1; // number가 1인 상태

  @override
  Widget build(BuildContext context) {
    print("2. build 호출 됨");

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("$number", style: TextStyle(fontSize: 35)),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print("3. 클릭 됨");

            // setState : build 메소드를 다시 호출해서 화면 갱신!
            setState(() {
              number += 1; // number를 1만큼 증가
            });
          },
        ),
      ),
    );
  }
}