ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2. Stateless Stateful
    FLUTTER/Common 2022. 9. 3. 23:07
    import 'package:flutter/material.dart';
    
    const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(
            scaffoldBackgroundColor: darkBlue,
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline4,
        );
      }
    }
    

    dartpad.dev 사이트에서 new pad 하면 나오는 코드입니다.
    Stateless 는 상태변화가 없는 위젯이라고 이해하면 간단한 내용 입니다.
    화면상에 변화가 없기 때문에 동적으로 변화되는 화면을 만들기에는 부적합합니다.

    // Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
    // for details. All rights reserved. Use of this source code is governed by a
    // BSD-style license that can be found in the LICENSE file.
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      final String title;
    
      const MyHomePage({
        Key? key,
        required this.title,
      }) : super(key: key);
    
      @override
      State createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      }
    }
    


    위 코드는 카운터 코드로 우측하단 버튼을 클릭하면 중앙의 카운터수가 올라갑니다.
    Stateless Widget을 사용한 첫번째 코드와 다르게 Stateful widget을 사용하였고
    하단 floatingActionButton에서 onPressed 이벤트에서 _incrementCounter 이벤트가 발생되도록 되어 있습니다. 상태변화가 있을시에는 setState() 함수를 사용하고 내부나 바깥에 상태변화에 사용되는 변수를 변경합니다. 

    setState() 메서드가 발생되면 _MyHomePageSate의 build가 다시한번 호출되어 Text에 변경된$_counter 값이 보여지게 됩니다. 

    'FLUTTER > Common' 카테고리의 다른 글

    showDialog 메세지창 띄우기  (0) 2022.09.11
    상태 관리 Provider  (1) 2022.09.11
    CustomScrollView  (0) 2022.09.09
    3. Flutter Widget (Stack관련)  (0) 2022.09.06
    1. 설치  (1) 2022.08.31
Designed by Tistory.