flutter firebase streambuilder 给出返回的空错误

Question

我正在尝试通过颤动从我的 firebase firestore 数据库中实时读取数据。 我了解到管理此问题的最佳方法是 streambuilder。 检查了一些有关此主题的站点，并编写了如下代码并放置了一个打印语句以查看是否一切正常，但是当我运行该程序时，它给出了以下错误：

A build function returned null.
The relevant error-causing widget was: 
  StreamBuilder<DocumentSnapshot> file:///C:/Users/faruk/Desktop/3-sayiavi/sayi_avi/lib/gamescreen.dart:116:15

The method '[]' was called on null.
Receiver: null
Tried calling: []("status")
The relevant error-causing widget was: 
  StreamBuilder<DocumentSnapshot> file:///C:/Users/faruk/Desktop/3-sayiavi/sayi_avi/lib/gamescreen.dart:116:15

我的代码如下：

    import 'package:flutter/material.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'numbers.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


Numbers myNumbers = Numbers();

void main(){
  runApp(
      GameScreen()
  );
}
class GameScreen extends StatefulWidget {
  static String id ='gamescreen';
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  final _auth =FirebaseAuth.instance;
  FirebaseUser loggedInUser;
  final _firestore = Firestore.instance;
  String collectionPath = 'users';
  String docPath;

  @override
  void initState(){
    super.initState();
    getCurrentUser();
  }
  
  void getCurrentUser() async{
    try{
      final user = await _auth.currentUser();
      if(user !=null){
        loggedInUser =user;
        docPath = loggedInUser.uid;
        print(docPath);
        print(collectionPath);
      }
    }catch(e){
      print(e);
    }
  }


  Expanded attachNumber(imagenumber){
    return Expanded(
      child:FlatButton(
        onPressed: (){
          setState(() {
            if(!myNumbers.numberStatus[1]){
              myNumbers.buttonValues['numberimage1'] = imagenumber;
              myNumbers.numberStatus[1] =true;
            }else if(!myNumbers.numberStatus[2]){
              myNumbers.buttonValues['numberimage2'] = imagenumber;
              myNumbers.numberStatus[2] =true;
            }else if(!myNumbers.numberStatus[3]){
              myNumbers.buttonValues['numberimage3'] = imagenumber;
              myNumbers.numberStatus[3] =true;
            }else if(!myNumbers.numberStatus[4]){
              myNumbers.buttonValues['numberimage4'] = imagenumber;
              myNumbers.numberStatus[4] =true;
            }
          });
          final assetsAudioPlayer = AssetsAudioPlayer();
          assetsAudioPlayer.open(
            Audio("assets/audios/click.wav"),
          );
        },
        padding: EdgeInsets.all(0),
        child: Image.asset('images/$imagenumber'),
      ),
    );
  }

  FlatButton showDeleteNumbers(statusNumber,number){
    return FlatButton(
      onPressed: (){
        setState(() {
          myNumbers.numberStatus[statusNumber] =false;
          myNumbers.buttonValues[number] = 'nonumber.png';
        });
      },
      child: Image.asset('images/'+myNumbers.buttonValues['$number']),
      //todo: _auth.signOut(); ekleyerek signout yapacaz
      //Navigator.pop(context); bir önceki ekrana dönecez;
    );
  }





  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amberAccent,
          title: Text('Sayı Avı Oyun Ekranı'),
        ),
        body: StreamBuilder(
          stream: _firestore.collection(collectionPath).document(docPath).snapshots(),
          builder: (context,snapshot){
            if(snapshot.hasData){
              var userDocument = snapshot.data;
              print(userDocument['status']);
              return Column(
                children: <Widget>[
                  Expanded(
                    flex: 80,
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getUserNumbers(),
                          ),
                        ),
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getOpponentNumbers(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:10,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        showDeleteNumbers(1,'numberimage1'),
                        showDeleteNumbers(2,'numberimage2'),
                        showDeleteNumbers(3,'numberimage3'),
                        showDeleteNumbers(4,'numberimage4'),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Row(
                      children: <Widget>[
                        attachNumber('one.png'),
                        attachNumber('two.png'),
                        attachNumber('three.png'),
                        attachNumber('four.png'),
                        attachNumber('five.png'),
                        attachNumber('six.png'),
                        attachNumber('seven.png'),
                        attachNumber('eight.png'),
                        attachNumber('nine.png'),
                        attachNumber('zero.png'),
                      ],
                    ),
                  ),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

像这样改变了代码：

import 'package:flutter/material.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'numbers.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


Numbers myNumbers = Numbers();

void main(){
  runApp(
      GameScreen()
  );
}
class GameScreen extends StatefulWidget {
  static String id ='gamescreen';
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  final _auth =FirebaseAuth.instance;
  FirebaseUser loggedInUser;
  final _firestore = Firestore.instance;
  String collectionPath = 'users';
  String docPath;

  @override
  void initState(){
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser() async{
    try{
      final user = await _auth.currentUser();
      if(user !=null){
        loggedInUser =user;
        docPath = loggedInUser.uid;
        print(docPath);
        print(collectionPath);
      }
    }catch(e){
      print(e);
    }
  }


  Expanded attachNumber(imagenumber){
    return Expanded(
      child:FlatButton(
        onPressed: (){
          setState(() {
            if(!myNumbers.numberStatus[1]){
              myNumbers.buttonValues['numberimage1'] = imagenumber;
              myNumbers.numberStatus[1] =true;
            }else if(!myNumbers.numberStatus[2]){
              myNumbers.buttonValues['numberimage2'] = imagenumber;
              myNumbers.numberStatus[2] =true;
            }else if(!myNumbers.numberStatus[3]){
              myNumbers.buttonValues['numberimage3'] = imagenumber;
              myNumbers.numberStatus[3] =true;
            }else if(!myNumbers.numberStatus[4]){
              myNumbers.buttonValues['numberimage4'] = imagenumber;
              myNumbers.numberStatus[4] =true;
            }
          });
          final assetsAudioPlayer = AssetsAudioPlayer();
          assetsAudioPlayer.open(
            Audio("assets/audios/click.wav"),
          );
        },
        padding: EdgeInsets.all(0),
        child: Image.asset('images/$imagenumber'),
      ),
    );
  }

  FlatButton showDeleteNumbers(statusNumber,number){
    return FlatButton(
      onPressed: (){
        setState(() {
          myNumbers.numberStatus[statusNumber] =false;
          myNumbers.buttonValues[number] = 'nonumber.png';
        });
      },
      child: Image.asset('images/'+myNumbers.buttonValues['$number']),
      //todo: _auth.signOut(); ekleyerek signout yapacaz
      //Navigator.pop(context); bir önceki ekrana dönecez;
    );
  }





  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amberAccent,
          title: Text('Sayı Avı Oyun Ekranı'),
        ),
        body: StreamBuilder<DocumentSnapshot>(
          stream: _firestore.collection(collectionPath).document(docPath).snapshots(),
          builder: (BuildContext context,AsyncSnapshot<DocumentSnapshot> snapshot){
            if (snapshot.hasError) {
              return Text('Something went wrong');
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Text("Loading");
            }
            if(snapshot.hasData){
              Map<String, dynamic> userDocument  = snapshot.data.data;
              print(userDocument);
              return Column(
                children: <Widget>[
                  Expanded(
                    flex: 80,
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getUserNumbers(),
                          ),
                        ),
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getOpponentNumbers(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:10,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        showDeleteNumbers(1,'numberimage1'),
                        showDeleteNumbers(2,'numberimage2'),
                        showDeleteNumbers(3,'numberimage3'),
                        showDeleteNumbers(4,'numberimage4'),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Row(
                      children: <Widget>[
                        attachNumber('one.png'),
                        attachNumber('two.png'),
                        attachNumber('three.png'),
                        attachNumber('four.png'),
                        attachNumber('five.png'),
                        attachNumber('six.png'),
                        attachNumber('seven.png'),
                        attachNumber('eight.png'),
                        attachNumber('nine.png'),
                        attachNumber('zero.png'),
                      ],
                    ),
                  ),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

目前，当我单击“保存”按钮时，它会获取地图的值，但是当我在 avd 中返回和前进时，它再次变为空值。 可能有什么问题？

我想要做的是，有一个 firebase 函数可以根据用户在数据库中的“状态”进行匹配。 当用户进入这个屏幕时，它在数据库中的状态将是“on”，当 firebase 函数找到另一个具有“on”状态的用户时，它会使他们的状态“ready”或类似的东西。 当用户的状态更改为“准备好”而不是显示例如“搜索匹配”屏幕时，它将更改为游戏屏幕，并且 2 人将开始基于回合进行游戏。 所以总而言之，一旦用户进入这个屏幕，它就应该开始监听其状态的变化。 此外，由于它将是一个回合制游戏，因此以后应该继续侦听其他字段以了解数据库更改。 我希望我能解释自己。

为下面的新依赖项更新了 flutter firebase 代码

import 'package:flutter/material.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'numbers.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


Numbers myNumbers = Numbers();

void main(){
  runApp(
      GameScreen()
  );
}
class GameScreen extends StatefulWidget {
  static String id ='gamescreen';
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  final _auth =FirebaseAuth.instance;
  User loggedInUser;
  final _firestore = FirebaseFirestore.instance;
  final String collectionPath = 'users';
  String docPath;
  DocumentReference userdoc;

  @override
  void initState(){
    super.initState();
    getCurrentUser();
  }


  void getCurrentUser() async{
    try{
      final user = await _auth.currentUser;
      if(user !=null){
        loggedInUser =user;
        docPath = loggedInUser.uid;
      }
    }catch(e){
      print(e);
    }
  }


  Expanded attachNumber(imagenumber){
    return Expanded(
      child:FlatButton(
        onPressed: (){
          setState(() {
            if(!myNumbers.numberStatus[1]){
              myNumbers.buttonValues['numberimage1'] = imagenumber;
              myNumbers.numberStatus[1] =true;
            }else if(!myNumbers.numberStatus[2]){
              myNumbers.buttonValues['numberimage2'] = imagenumber;
              myNumbers.numberStatus[2] =true;
            }else if(!myNumbers.numberStatus[3]){
              myNumbers.buttonValues['numberimage3'] = imagenumber;
              myNumbers.numberStatus[3] =true;
            }else if(!myNumbers.numberStatus[4]){
              myNumbers.buttonValues['numberimage4'] = imagenumber;
              myNumbers.numberStatus[4] =true;
            }
          });
          final assetsAudioPlayer = AssetsAudioPlayer();
          assetsAudioPlayer.open(
            Audio("assets/audios/click.wav"),
          );
        },
        padding: EdgeInsets.all(0),
        child: Image.asset('images/$imagenumber'),
      ),
    );
  }

  FlatButton showDeleteNumbers(statusNumber,number){
    return FlatButton(
      onPressed: (){
        setState(() {
          myNumbers.numberStatus[statusNumber] =false;
          myNumbers.buttonValues[number] = 'nonumber.png';
        });
      },
      child: Image.asset('images/'+myNumbers.buttonValues['$number']),
    );
  }




  @override
  Widget build(BuildContext context) {
    userdoc = _firestore.collection(collectionPath).doc(docPath);
    return StreamBuilder<DocumentSnapshot>(
      stream: userdoc.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        if(snapshot.hasData){
          Map<String, dynamic> userDocument  = snapshot.data.data();
          print(collectionPath);
          print(docPath);
          print(snapshot.data);
          print(userDocument);
          return MaterialApp(
            home:Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.amberAccent,
                title: Text('Sayı Avı Oyun Ekranı'),
              ),
              body:Column(
                children: <Widget>[
                  Expanded(
                    flex: 80,
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getUserNumbers(),
                          ),
                        ),
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getOpponentNumbers(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:10,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        showDeleteNumbers(1,'numberimage1'),
                        showDeleteNumbers(2,'numberimage2'),
                        showDeleteNumbers(3,'numberimage3'),
                        showDeleteNumbers(4,'numberimage4'),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Row(
                      children: <Widget>[
                        attachNumber('one.png'),
                        attachNumber('two.png'),
                        attachNumber('three.png'),
                        attachNumber('four.png'),
                        attachNumber('five.png'),
                        attachNumber('six.png'),
                        attachNumber('seven.png'),
                        attachNumber('eight.png'),
                        attachNumber('nine.png'),
                        attachNumber('zero.png'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      },
    );
  }
}

您可以看到有 4 个打印件来检查我是否正确获取了数据。 目前，当我运行该应用程序时，它会显示

I/flutter (15703): 用户 I/flutter (15703): viPK8SpL9MOIV2bQqGzBkKVdYAk2 I/flutter (15703): 'DocumentSnapshot' 的实例 I/flutter (15703): null

第 4 个不应该为空，当我在 android studio 中单击“保存”按钮时，我得到

I/flutter (15703): 用户 I/flutter (15703): viPK8SpL9MOIV2bQqGzBkKVdYAk2 I/flutter (15703): 'DocumentSnapshot' 的实例 I/flutter (15703): {password: 123456: loss: 0, email: faruk@durusoy.net，状态：准备好了}

这是正确的结果。

Answer 1

您忘记在 StreamBuilder 中对snapshots()的结果调用data() 。

var userDocument = snapshot.data.data();

请参阅： https : //firebase.flutter.dev/docs/firestore/usage/#realtime-changes

Answer 2

我认为当您返回上一个屏幕时，不会再次调用initState and getCurrentUser()函数，并且docPath is null因此您应该从 Build 中调用此函数或以另一种方式调用它并获取docPath

Answer 3

首先你应该调用 initState 然后处理它。 因为每次运行页面或更新页面时，您都会调用initState() ，这就是您可能再次丢失所有数据的原因。 代码是这样的：

  void initState() {
    super.initState();
   getCurrentUser();
  }

  @override
  void dispose() {
    // : implement dispose
   getCurrentUser();
    super.dispose();
  }

如果这对阅读此代码没有帮助。 由于QuerySnapshot和DocumentSnapShot我遇到了这个问题

 StreamBuilder<QuerySnapshot>(

        stream: Firestore.instance.collection("MyTodos").snapshots(),

        builder: (context, snapshots) {

          return ListView.builder(
            shrinkWrap: true,
            addAutomaticKeepAlives: true,
            itemCount: snapshots.data.documents.length,
           
            itemBuilder: (BuildContext context, int index) {

              DocumentSnapshot documentSnapshot =
                  snapshots.data.documents[index];

              return Card(              
                  margin: EdgeInsets.all(6),
                  elevation: 2.0,
                  child: ListTile(
                  title: Text(documentSnapshot.data["todoTitle"]),                     
                  ),               
              );
            },
          );
        },
      ),

根据您的错误。我将您的代码更改为此，您可以在此链接上找到更多信息https://firebase.flutter.dev/docs/firestore/usage/#realtime-changes

@override
  Widget build(BuildContext context) {
final users = _firestore.collection(collectionPath).document(docPath);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amberAccent,
          title: Text('Sayı Avı Oyun Ekranı'),
        ),
        body: StreamBuilder<QuerySnapshot>(
          stream: users.snapshots(),
          builder: (BuildContext context,AsyncSnapshot<QuerySnapshot> snapshot){
            if (snapshot.hasError) {
              return Text('Something went wrong');
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Text("Loading");
            }
            if(snapshot.hasData){
              Map<String, dynamic> userDocument  = snapshot.data.documents;
              print(userDocument);
              return Column(
                children: <Widget>[
                  Expanded(
                    flex: 80,
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getUserNumbers(),
                          ),
                        ),
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getOpponentNumbers(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:10,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        showDeleteNumbers(1,'numberimage1'),
                        showDeleteNumbers(2,'numberimage2'),
                        showDeleteNumbers(3,'numberimage3'),
                        showDeleteNumbers(4,'numberimage4'),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Row(
                      children: <Widget>[
                        attachNumber('one.png'),
                        attachNumber('two.png'),
                        attachNumber('three.png'),
                        attachNumber('four.png'),
                        attachNumber('five.png'),
                        attachNumber('six.png'),
                        attachNumber('seven.png'),
                        attachNumber('eight.png'),
                        attachNumber('nine.png'),
                        attachNumber('zero.png'),
                      ],
                    ),
                  ),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

Answer 4

在尝试了 ahmed 的答案并且没有解决方案之后，我决定像这里https://firebase.flutter.dev/docs/overview一样重新排列我的代码，它终于奏效了。 还升级了我的所有依赖项。

这是我的最终代码：

import 'package:flutter/material.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'numbers.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';


Numbers myNumbers = Numbers();

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

class GameScreen extends StatefulWidget {
  static String id ='gamescreen';

  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  bool _initialized = false;
  bool _error = false;

  void initializeFlutterFire() async {
    try {
      // Wait for Firebase to initialize and set `_initialized` state to true
      await Firebase.initializeApp();
      setState(() {
        _initialized = true;
      });
    } catch(e) {
      // Set `_error` state to true if Firebase initialization fails
      setState(() {
        _error = true;
      });
    }
  }

  @override
  void initState() {
    initializeFlutterFire();
    super.initState();
    getCurrentUser();
  }

  final _auth =FirebaseAuth.instance;
  User loggedInUser;
  final _firestore = FirebaseFirestore.instance;
  final String collectionPath = 'users';
  String docPath;
  DocumentReference userdoc;


  void getCurrentUser() async{
    try{
      final user = await _auth.currentUser;
      if(user !=null){
        loggedInUser =user;
        docPath = loggedInUser.uid;
      }
    }catch(e){
      print(e);
    }
  }


  Expanded attachNumber(imagenumber){
    return Expanded(
      child:FlatButton(
        onPressed: (){
          setState(() {
            if(!myNumbers.numberStatus[1]){
              myNumbers.buttonValues['numberimage1'] = imagenumber;
              myNumbers.numberStatus[1] =true;
            }else if(!myNumbers.numberStatus[2]){
              myNumbers.buttonValues['numberimage2'] = imagenumber;
              myNumbers.numberStatus[2] =true;
            }else if(!myNumbers.numberStatus[3]){
              myNumbers.buttonValues['numberimage3'] = imagenumber;
              myNumbers.numberStatus[3] =true;
            }else if(!myNumbers.numberStatus[4]){
              myNumbers.buttonValues['numberimage4'] = imagenumber;
              myNumbers.numberStatus[4] =true;
            }
          });
          final assetsAudioPlayer = AssetsAudioPlayer();
          assetsAudioPlayer.open(
            Audio("assets/audios/click.wav"),
          );
        },
        padding: EdgeInsets.all(0),
        child: Image.asset('images/$imagenumber'),
      ),
    );
  }

  FlatButton showDeleteNumbers(statusNumber,number){
    return FlatButton(
      onPressed: (){
        setState(() {
          myNumbers.numberStatus[statusNumber] =false;
          myNumbers.buttonValues[number] = 'nonumber.png';
        });
      },
      child: Image.asset('images/'+myNumbers.buttonValues['$number']),
    );
  }




  @override
  Widget build(BuildContext context) {
    userdoc = _firestore.collection(collectionPath).doc(docPath);
    if(_error) {
      return Text('error-game', textDirection: TextDirection.ltr);
    }

    // Show a loader until FlutterFire is initialized
    if (!_initialized) {
      return Text('Loading', textDirection: TextDirection.ltr);
    }
    return StreamBuilder<DocumentSnapshot>(
      stream: userdoc.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        if(snapshot.hasData){
          Map<String, dynamic> userDocument  = snapshot.data.data();
          print(collectionPath);
          print(docPath);
          print(snapshot.data);
          print(userDocument);
          return MaterialApp(
            home:Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.amberAccent,
                title: Text('Sayı Avı Oyun Ekranı'),
              ),
              body:Column(
                children: <Widget>[
                  Expanded(
                    flex: 80,
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getUserNumbers(),
                          ),
                        ),
                        Expanded(
                          flex: 50,
                          child: Column(
                            children: myNumbers.getOpponentNumbers(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:10,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        showDeleteNumbers(1,'numberimage1'),
                        showDeleteNumbers(2,'numberimage2'),
                        showDeleteNumbers(3,'numberimage3'),
                        showDeleteNumbers(4,'numberimage4'),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Row(
                      children: <Widget>[
                        attachNumber('one.png'),
                        attachNumber('two.png'),
                        attachNumber('three.png'),
                        attachNumber('four.png'),
                        attachNumber('five.png'),
                        attachNumber('six.png'),
                        attachNumber('seven.png'),
                        attachNumber('eight.png'),
                        attachNumber('nine.png'),
                        attachNumber('zero.png'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      },
    );
  }
}