Mobile/Flutter

Flutter StatelessWidget & StatefulWidget

rockettttman 2024. 3. 28. 14:01

Fultter Mobile의 화면 위젯은 Stateful 하거나 Stateless하다.

 

 

Stateless widget

stateless widget은 절대 변하지 않는 정적 화면이다. StatelessWidget을 상속하며 Icon, IconButton, Text등이 이에 해당된다. 실 사용 화면에서는 이용약관 화면 등을 예로 들 수 있다.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Title"),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.pop(context),
        child: const Icon(Icons.arrow_back),
      ),
    );
  }
}

 

Stateful widget

stateful widget은 동적이다. StatefulWidget을 상속하며 데이터를 주고받고 데이터들로 동적으로 화면을 처리하는 대부분의 화면에 사용된다.

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: Container(),
    );
  }
}

 

https://docs.flutter.dev/ui/interactivity

 

Add interactivity to your Flutter app

How to implement a stateful widget that responds to taps.

docs.flutter.dev