Flutter - アプリのインタラクティブ性を生み出す

Question

Flutterでインタラクティブ機能を生成するのに迷っています。

私はFlatButtonsを上記の値とタップした順序でタップするようにしています。

たとえば、タップ番号1、次に、1,1,1,1および最後の2は、かなりのリストを覚えて$ 12111と表示されます。

バックスペースアイコンをタップすると、リストに最後に入力された番号が削除されます。

私はクラス間でこの通信を生成することに気づいていません。

私を助けることができますか？私はStatefulWidgetを使用しようとしていますが、私は成功しません。

以下、私は上記の画面を生成するコードを残しました。

main.dart

import "package:flutter/material.dart"; 

void main() { 
    runApp(new KeyboardApp()); 
} 

class KeyboardApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new HomePage(), 
    ); 
    } 
} 

class HomePage extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new ListView (
     children: <Widget>[ 
      new Number(), 
      new Keyboard(), 
     ], 
    ), 
    ); 
    } 
} 

class NumberState extends StatefulWidget { 
    NumberList createState() => new NumberList(); 
} 

class NumberList extends State<NumberState> { 
    List<String> numbers = <String>[]; 
    String number; 

    @override 
    Widget build(BuildContext context) { 
    number = this.numbers.join(''); 
    return new Text(
     this.number, 
     style: new TextStyle(
     fontFamily: 'Roboto', 
     color: new Color(0xFFFFFFFF), 
     fontSize: 45.0 
    ) 
    ); 
    } 
} 

class Number extends StatelessWidget { 
    final Color color = new Color(0xFFE57373); 

    @override 
    Widget build(BuildContext context) { 
    return new Container(
     height: 145.0, 
     child: new Column(
     mainAxisAlignment: MainAxisAlignment.center, 
     children: <Widget>[ 
      new Container(
      padding: new EdgeInsets.only(right: 16.0, top: 35.0), 
      child: new Row(
       mainAxisAlignment: MainAxisAlignment.end, 
       children: <Widget>[ 
       new Text(
        '\$ ', 
        style: new TextStyle(
        fontFamily: 'Roboto', 
        color: new Color(0xFFFFFFFF), 
        fontSize: 20.0 
       ) 
       ), 
       new NumberState(), 
       ], 
      ) 
     ) 
     ], 
    ), 
     color: color, 
    ); 
    } 
} 

class Keyboard extends StatelessWidget { 
    final Color color = new Color(0xFFE57373); 

    var list = new NumberList().numbers; 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     padding: new EdgeInsets.only(right: 15.0, left: 15.0, top: 47.0, bottom: 20.0), 
     child: new Column(
     children: <Widget>[ 
      new Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround, 
      children: <Widget>[ 
       new FlatButton(
       textColor: color, 
       child: new Text(
        '1', 
        style: new TextStyle(
        fontSize: 35.0 
       ), 
       ), 
       onPressed:() { 
        this.list.add('1'); 
       }, 
      ), 
       new FlatButton(
       textColor: color, 
       child: new Text(
        '2', 
        style: new TextStyle(
        fontSize: 35.0 
       ), 
       ), 
       onPressed:() { 
        this.list.add('2'); 
       }, 
      ), 
       new FlatButton(
       textColor: color, 
       child: new Icon(
        Icons.backspace, 
        size: 35.0 
       ), 
       onPressed:() { 
        this.list.removeLast(); 
       }, 
      ), 
      ], 
     ), 
     ], 
    ), 
    ); 
    } 
} 

Answer 1

Flutter interactivity tutorialをチェックしてください。高レベル（heh）では、問題はウィジェットツリーの葉に状態を格納しようとしていることです。あなたはあなたの状態をあなたの木の上に保管しておき、子どもにそれを伝えなければなりません。

以下の例ではValueNotifierが使用されていますが、ストリーム、コールバック、さらにはFirebase Databaseを使用して状態を渡すこともできます。

import "package:flutter/material.dart"; 

void main() { 
    runApp(new KeyboardApp()); 
} 

class KeyboardApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new HomePage(), 
    ); 
    } 
} 

class HomePage extends StatefulWidget { 
    HomePageState createState() => new HomePageState(); 
} 

class HomePageState extends State<HomePage> { 
    ValueNotifier<List<int>> numbers = new ValueNotifier<List<int>>(<int>[]); 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new ListView (
     children: <Widget>[ 
      new NumberDisplay(numbers: numbers), 
      new Keyboard(numbers: numbers), 
     ], 
    ), 
    ); 
    } 
} 

class NumberDisplay extends AnimatedWidget { 
    NumberDisplay({ this.numbers }) : super(listenable: numbers); 
    final ValueNotifier<List<int>> numbers; 

    final Color _color = new Color(0xFFE57373); 

    @override 
    Widget build(BuildContext context) { 
    return new Container(
     height: 145.0, 
     child: new Column(
     mainAxisAlignment: MainAxisAlignment.center, 
     children: <Widget>[ 
      new Container(
      padding: new EdgeInsets.only(right: 16.0, top: 35.0), 
      child: new Row(
       mainAxisAlignment: MainAxisAlignment.end, 
       children: <Widget>[ 
       new Text(
        '\$ ', 
        style: new TextStyle(
        fontFamily: 'Roboto', 
        color: new Color(0xFFFFFFFF), 
        fontSize: 20.0 
       ) 
       ), 
       new Text(
        this.numbers.value.join(''), 
        style: new TextStyle(
        fontFamily: 'Roboto', 
        color: new Color(0xFFFFFFFF), 
        fontSize: 45.0 
       ), 
       ), 
       ], 
      ), 
     ), 
     ], 
    ), 
     color: _color, 
    ); 
    } 
} 

class Keyboard extends StatelessWidget { 
    Keyboard({ this.numbers }); 
    final ValueNotifier<List<int>> numbers; 

    final Color _color = new Color(0xFFE57373); 

    @override 
    Widget build(BuildContext context) { 
    return new Container(
     padding: new EdgeInsets.only(right: 15.0, left: 15.0, top: 47.0, bottom: 20.0), 
     child: new Column(
     children: <Widget>[ 
      new Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround, 
      children: <Widget>[ 
       new FlatButton(
       textColor: _color, 
       child: new Text(
        '1', 
        style: new TextStyle(
        fontSize: 35.0 
       ), 
       ), 
       onPressed:() { 
        numbers.value = new List.from(numbers.value)..add(1); 
       }, 
      ), 
       new FlatButton(
       textColor: _color, 
       child: new Text(
        '2', 
        style: new TextStyle(
        fontSize: 35.0 
       ), 
       ), 
       onPressed:() { 
        numbers.value = new List.from(numbers.value)..add(2); 
       }, 
      ), 
       new FlatButton(
       textColor: _color, 
       child: new Icon(
        Icons.backspace, 
        size: 35.0 
       ), 
       onPressed:() { 
        numbers.value = new List.from(numbers.value)..removeLast(); 
       }, 
      ), 
      ], 
     ), 
     ], 
    ), 
    ); 
    } 
}