facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==基本サンプル== 呼び出し側 <pre> Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("title1",), ),...」)
 
(子から親を呼ぶ方法)
 
(同じ利用者による、間の11版が非表示)
行20: 行20:
 
}
 
}
 
</pre>
 
</pre>
==プロパティ付きサンプル==
+
==プロパティ付き静的widgetサンプル==
 
呼び出し側
 
呼び出し側
 
<pre>
 
<pre>
行34: 行34:
 
import 'package:flutter/material.dart';
 
import 'package:flutter/material.dart';
 
class HogehogePage extends StatelessWidget {
 
class HogehogePage extends StatelessWidget {
 +
  HogehogePage({this.page, Key key}) : super(key: key);
 
   int page = 1;
 
   int page = 1;
  HogehogePage({this.page, Key key, String title}) : super(key: key);
 
 
   @override
 
   @override
 
   Widget build(BuildContext context) {
 
   Widget build(BuildContext context) {
行42: 行42:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
==パラメータを必須としたい場合の静的widgetサンプル==
 +
@required をつければ良いが、パラメータを追加せずクラスをロードしてもビルドが通った・・。
 +
 +
切り出した静的widget
 +
<pre>
 +
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());
 +
  }
 +
}
 +
</pre>
 +
 +
==状態維持付きwidgetサンプル==
 +
呼び出し側
 +
<pre>
 +
Widget build(BuildContext context) {
 +
    return Scaffold(
 +
      appBar: AppBar(
 +
        title: Text("title1",),
 +
      ),
 +
      body: PiyopiyoPage(page: page),
 +
</pre>
 +
切り出した状態維持付きwidget
 +
<pre>
 +
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();
 +
        },
 +
      );
 +
  }
 +
}
 +
</pre>
 +
 +
==子から親を呼ぶ方法==
 +
==子widgetから親メソッドを呼ぶサンプル==
 +
呼び出し側
 +
<pre>
 +
void clickPageType(String type) {
 +
  print("type=" + type);
 +
}
 +
Widget build(BuildContext context) {
 +
    return Scaffold(
 +
      appBar: AppBar(
 +
        title: Text("title1",),
 +
      ),
 +
      body: PiyopiyoPage(clickPageType: clickPageType),
 +
</pre>
 +
子widget
 +
<pre>
 +
class PiyopiyoPage extends StatefulWidget {
 +
  PiyopiyoPage({Key key, this.clickPageType}) : super(key: key);
 +
  Function clickPageType;
 +
  @override
 +
  _PiyopiyoPageState createState() => _PiyopiyoPageState();
 +
}
 +
class _PiyopiyoPageState extends State<PiyopiyoPage> {
 +
  _click() {
 +
    widget.clickPageType("hogehoge");
 +
    setState((){});
 +
  }
 +
  @override
 +
  Widget build(BuildContext context) {
 +
    return
 +
      FlatButton(
 +
        child: Text("page",
 +
        ),
 +
        onPressed: () {
 +
          _click();
 +
        },
 +
      );
 +
  }
 +
}
 +
</pre>
 +
親メソッドを渡すことで親メソッドは呼べた。
 +
最初、親クラスのState<PiyopiyoPage>のinstnaceをthisで渡して、widget.state.clickPageType("hoge")などとしたが、
 +
clickPageTypeメソッドが呼べなかった。
 +
 +
参考:https://qiita.com/takenobi/items/17089c3dff247c84aead

2019年12月20日 (金) 11:20時点における最新版

基本サンプル

呼び出し側

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();
        },
      );
  }
}

子から親を呼ぶ方法

子widgetから親メソッドを呼ぶサンプル

呼び出し側

void clickPageType(String type) {
  print("type=" + type);
}
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title1",),
      ),
      body: PiyopiyoPage(clickPageType: clickPageType),

子widget

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

親メソッドを渡すことで親メソッドは呼べた。 最初、親クラスのState<PiyopiyoPage>のinstnaceをthisで渡して、widget.state.clickPageType("hoge")などとしたが、 clickPageTypeメソッドが呼べなかった。

参考:https://qiita.com/takenobi/items/17089c3dff247c84aead