필요에 육박했기 때문에 Flutter를 배웁니다④～StatefulWidget편～

Qiita의 마이 페이지를 오랜만에 본 것입니다만, 제가 쓴 기사로 제일 View수가 많았던 것이 마네론에 관한 기사였습니다.
모두 기술 정보보다 마네론의 정보를 원한다. . .
FATF의 대일 심사 결과를 정리하는 심의가 6월 하순에 실시되어, 8월 중순위에 결과 발표의 예정입니다
아마 일본의 경우는 현상 200만엔 이상의 거래의 경우 신분의 확인등이 필수였지만, 우선은 이것이 100만엔이 되지 않을까요.
또한 가상 통화와 프리마 앱의 취급도 엄격해지는 것 같습니다.
자금 이동행과 수납 대행 서비스의 경계 등이 규정되거나 할지도 모르고, 마음이 향하면 기사에 모으려고 생각합니다.

환경 구축편
Hello World편
외부 패키지 이용편
StatefulWidget 이용편 　⇐　지금 여기

제5장 StatefulWidget

StatelessWidget을 대략적으로 배웠으므로 StatefulWidget에도 손을 댔습니다.
기본적인 StatefulWidget을 다루는 방법은 아래와 같은 형태가 되는 것 같습니다.

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  @override
  Widget build(BuildContext context){
    return Text('I am Foo');
  }
}

StatefulWidget을 상속한 Widget 클래스는 build 클래스를 가지지 않고,
State를 상속한 State 클래스(이 표현이 올바른지는 모르지만)를 호출하는 createState 메소드를 가질 뿐입니다.
즉 세세한 움직임은 State 클래스에 맡기고, StatefulWidget 클래스는 그것을 호출해, 결과를 받는 것 같은 이미지군요.

그래서 전회의 기사의 마지막에 실은 것과 위의 코드를 합체시키면 아래와 같습니다.

main.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var num = 5;
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: 
          ListView.builder(
            itemCount: num,
            itemBuilder:(context, int index){
              return Padding(
                padding: EdgeInsets.all(20.0),
                child: HogeWidget()
              );
            }
          )
      ),
    );
  }
}

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  @override
  Widget build(BuildContext context){
    return Text('I am Foo');
  }
}

「I am Foo」만을 표시시켜도 재미없기 때문에, 아래와 같이 변경해 보겠습니다.

main.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.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: const Text('Welcome to Flutter'),
        ),
        body: 
          HogeWidget()
      ),
    );
  }
}

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  var num = 10;
  @override
  Widget build(BuildContext context){
    return ListView.builder(
      itemCount: num,
      itemBuilder:(context, int index){
        return Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
            nouns[index],
          )
        );
      }
    );
  }
}

코드와 같이 ListView.build의 메소드를 StatefulWidget을 상속한 HogeWidget에 처리를 맡기기로 했습니다.

우선 여기까지, 휴식은 끼우면서 5시간 정도입니까.
아직 구현할 수 있는 레벨에는 도달하지 않았지만, 어쩐지 감각은 잡은 느낌입니다.
공식으로 튜토리얼 등이 충실하고 있으므로, 재택 워크의 여가일 때라도 캐치 업 해 보는 것은 어떻습니까.