flutter

본 토픽은 현재 준비중입니다. 공동공부에 참여하시면 완성 되었을 때 알려드립니다.

첫번째 앱만들기 3단계 - 상태저장 위젯 추가

immutable 은 속성을 변경할 없는 것을 말하는 것이다. Stateless Widget 위젯은 값이 최종값이 되는 것이다.

상대적으로 Stateful widgets 위젯들은 위젯이 메모리에 살아있는 동안은 그 상태가 유지된다. 

Stateful widget를 구현하기 위해서는 최소한 두개의 클래스가 필요하다.

Stateful widget 자체는 immutable하지만 객체가 생성되는 시점에서 State Class를 생성하고 위젯이 메모리에 상주해 있는 동안 그 속성값을 변경할 수 있다.

 

RandowWords 라는 Stateful widget 를 만들것이다. RandomWords는 자체적으로 RandomWOrdsState 클래스를 가지고 있다. RandowWords 를 사용하며 MyApp Stateless widget 안에 존재한다.

 

1. main.dart 파일 아래에 State를 만들어라.

class RandomWordsState extends State<RandomWords> {
  // TODO Add build() method
}

State<Randomwords> 클래스에 일반적인 값들과 로직을 저장하게 되어 있다. 이것은 RandomWords의 상태를 관리 한다. 

이 클래스는 무한스콜로 기능과 좋아요 기능을 담당한다.

RandomWordsState 는 RandomWords 클래스에 의존한다. 

2.  RandomWords 위젯을 추가해라. RandomWords 위젯을 추가하면 자기자신 옆에 상태 클래스 만든다.

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

3. build() 메소드를 RandomWordsState 에 추가하라.

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

4. 만든 클래스로 랜덤값을 변경하라.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.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('Stateful Widget 추가하기'),
        ),
        body: Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  // TODO Add build() method
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

5. 앱을 다시 배포하면 기존과 동일하지만 앱을 리로딩할 할때마다 단어가 변경되는 것을 확인할 수 있을 것 이다.

댓글

댓글 본문
버전 관리
happydeveloper
현재 버전
선택 버전
graphittie 자세히 보기