「Flutter/UI/別widget切出」の版間の差分

2019年12月19日 (木) 18:59時点における版

基本サンプル

呼び出し側

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title1",),
      ),
      body: HogehogePage(),

切り出した静的widget

import 'package:flutter/material.dart';
class HogehogePage extends StatelessWidget {
  HogehogePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text("hogehoge");
  }
}

プロパティ付き静的widgetサンプル

呼び出し側

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title1",),
      ),
      body: HogehogePage(page: page),

切り出した静的widget

import 'package:flutter/material.dart';
class HogehogePage extends StatelessWidget {
  HogehogePage({this.page, Key key}) : super(key: key);
  int page = 1;
  @override
  Widget build(BuildContext context) {
    return Text("hogehoge" + page.toString());
  }
}

パラメータを必須としたい場合の静的widgetサンプル

@required をつければ良いが、パラメータを追加せずクラスをロードしてもビルドが通った・・。

切り出した静的widget

import 'package:flutter/material.dart';
class HogehogePage extends StatelessWidget {
  HogehogePage({@required this.page, Key key, String title}) : super(key: key);
  int page = 1;
  @override
  Widget build(BuildContext context) {
    return Text("hogehoge" + page.toString());
  }
}

状態維持付きwidgetサンプル

呼び出し側

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title1",),
      ),
      body: PiyopiyoPage(page: page),

切り出した状態維持付きwidget

class PiyopiyoPage extends StatefulWidget {
  PiyopiyoPage({this.page, Key key}) : super(key: key);
  int page = 1;
  @override
  _PiyopiyoPageState createState() => _PiyopiyoPageState();
}
class _PiyopiyoPageState extends State<PiyopiyoPage> {
  _click() {
    widget.page++;
    setState((){});
  }
  @override
  Widget build(BuildContext context) {
    return
      FlatButton(
        child: Text("page=" + widget.page.toString(),
        ),
        onPressed: () {
          _click();
        },
      );
  }
}