如何在 Flutter 中使此代码更小

Question

我是 flutter 的新手，我开发了一个应用程序来存储密码（如 CRUD 应用程序）。 代码正常工作，一切正常，但不是很清晰，也很容易看到。 我知道我们可以剪切部分代码并将它们放在另一个文件中，然后将其作为方法调用到主代码中，但我不知道如何处理代码的某些特定部分，因为某些部分在另一个文件中使用小部件。

这有点难以解释，但查看代码似乎更容易。

为了演示我想要做什么，请查看floatingActionButton部分。 我制作了一个modalCreate，这是另一个带有说明的文件。

onPressed: () => modalCreate(context)

当我按下应用程序中的编辑按钮时，这正是我想要做的。

OBS：（我用“-------”标记了我想改变的部分。）

这是代码：主页

import 'dart:convert';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

import 'dialogAddPass.dart';

class HomePage extends StatelessWidget {
  @override
  static String tag = '/home';

  @override
  Widget build(BuildContext context) {
    Firebase.initializeApp();
    var snapshots = FirebaseFirestore.instance
        .collection('senhas')
        .orderBy('data')
        .snapshots();

    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 60,
                  ),
                  Text.rich(
                    TextSpan(
                      children: <TextSpan>[
                        TextSpan(
                          text: 'Bem-vindo(a)',
                          style: TextStyle(
                              fontFamily: 'SanFrancisco',
                              fontSize: 35,
                              fontWeight: FontWeight.w500),
                        ),
                        TextSpan(
                          text: '\nSuas senhas cadastradas',
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.w300),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          StreamBuilder(
              stream: snapshots,
              builder: (
                BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot,
              ) {
                // Mensagem de erro
                if (snapshot.hasError) {
                  return Center(
                      child: Text('Ocorreu um erro: \n${snapshot.error}'));
                }

                // Bolinha carregando enquanto processa os arquivos.
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }

                // Se nenhuma senha for encontrada
                if (snapshot.data.docs.length == 0) {
                  return ColumnNenhumaSenhaEncontrada();
                }

                // Mostrando as senhas
                return Container(
                  margin: const EdgeInsets.only(top: 130),
                  child: Flexible(
                    child: ListView.builder(
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, int i) {
                        var doc = snapshot.data.docs[i];
                        var itens = doc.data();
                        print(itens['nomeDaSenha']);

                        return Container(
                          padding: const EdgeInsets.fromLTRB(0, 5, 0, 15),
                          margin: const EdgeInsets.fromLTRB(15, 15, 15, 5),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(15),
                          ),
                          // Layout de cada senha
                          child: ListTile(
                            isThreeLine: true,
                            // ignore: missing_required_param
                            leading: IconButton(icon: Icon(Icons.lock)),
                            title: Text(itens['nomeDaSenha'],
                                style: TextStyle(
                                    fontSize: 25, color: Colors.orange[700])),
                            subtitle: Text("Senha: ${itens['senha']}",
                                style: TextStyle(fontSize: 20)),
                            trailing: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  icon: Icon(
                                    Icons.edit,
                                    size: 30,
                                    color: Colors.yellow[800],
                                  ),
                                  onPressed: () {
                                  // This part i wanna import as another .dart file
-------------------------------------------------------------------------------------------
                                    var form = GlobalKey<FormState>();
                                    var nomeDaSenha = TextEditingController();
                                    var senha = TextEditingController();

                                    nomeDaSenha.text = doc['nomeDaSenha'];
                                    showDialog(
                                        context: context,
                                        builder: (BuildContext context) {
                                          return AlertDialog(
                                            title: Text('Editar senha 📝'),
                                            titleTextStyle: TextStyle(
                                                fontSize: 20,
                                                color: Colors.black,
                                                fontFamily: "SanFrancisco",
                                                fontWeight: FontWeight.w500),
                                            content: Form(
                                              key: form,
                                              child: Container(
                                                // Deixando o Dialog menor
                                                height: MediaQuery.of(context)
                                                        .size
                                                        .height /
                                                    4,
                                                width: MediaQuery.of(context)
                                                    .size
                                                    .width,
                                                child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.center,
                                                  children: <Widget>[
                                                    Text(
                                                      'Nome da Senha',
                                                      style: TextStyle(
                                                          fontFamily:
                                                              "SanFrancisco",
                                                          fontSize: 20),
                                                    ),
                                                    SizedBox(height: 5),
                                                    TextFormField(
                                                        // Passando os valores para a variavel nomeDaSenha
                                                        controller: nomeDaSenha,
                                                        textInputAction:
                                                            TextInputAction
                                                                .next,
                                                        decoration:
                                                            InputDecoration(
                                                          hintText:
                                                              'Ex: Banco Itaú',
                                                          border:
                                                              OutlineInputBorder(
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        15),
                                                          ),
                                                        ),

                                                        // Tornando o campo obrigatório
                                                        validator: (value) {
                                                          if (value
                                                              .trim()
                                                              .isEmpty) {
                                                            return "Preencha este campo";
                                                          }
                                                          return null;
                                                        }),
                                                    SizedBox(height: 15),
                                                    Text(
                                                      'Senha',
                                                      style: TextStyle(
                                                          fontFamily:
                                                              "SanFrancisco",
                                                          fontSize: 20),
                                                    ),
                                                    SizedBox(height: 2),
                                                    TextFormField(
                                                        obscureText: true,
                                                        textInputAction:
                                                            TextInputAction.go,
                                                        // Passando o valor para a variavel senha
                                                        controller: senha,
                                                        decoration:
                                                            InputDecoration(
                                                          hintText: 'Ex: 12345',
                                                          border:
                                                              OutlineInputBorder(
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        15),
                                                          ),
                                                        ),
                                                        // Tornando o campo obrigatório
                                                        validator: (value) {
                                                          if (value
                                                              .trim()
                                                              .isEmpty) {
                                                            return "Preencha este campo";
                                                          }
                                                          return null;
                                                        })
                                                  ],
                                                ),
                                              ),
                                            ),

                                            // Botão Cancelar
                                            actions: <Widget>[
                                              Material(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                child: MaterialButton(
                                                  minWidth: 10,
                                                  child: Text(
                                                    "Cancelar",
                                                    style:
                                                        TextStyle(fontSize: 15),
                                                  ),
                                                  onPressed: () =>
                                                      Navigator.of(context)
                                                          .pop(),
                                                ),
                                              ),
                                              // Botão Adicionar
                                              Material(
                                                borderRadius:
                                                    BorderRadius.circular(5),
                                                color: Colors.orange,
                                                child: MaterialButton(
                                                  minWidth: 70,
                                                  child: Text(
                                                    "Editar",
                                                    style: TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 15),
                                                  ),
                                                  onPressed: () async {
                                                    if (form.currentState
                                                        .validate()) {
                                                      snapshot.data.docs[i]
                                                          .reference
                                                          .update({
                                                        'nomeDaSenha':
                                                            nomeDaSenha.text
                                                                .trim(),
                                                        'senha':
                                                            senha.text.trim(),
                                                      }).whenComplete(() =>
                                                              Navigator.of(
                                                                      context)
                                                                  .pop());

                                                      Fluttertoast.showToast(
                                                          msg: "Senha Editada!",
                                                          toastLength: Toast
                                                              .LENGTH_SHORT,
                                                          gravity: ToastGravity
                                                              .BOTTOM,
                                                          backgroundColor:
                                                              Colors.green);
                                                    }
                                                  },
                                                ),
                                              ),
                                            ],
                                          );
                                        });
                                  },
                                ),
-------------------------------------------------------------------------------------------
                                IconButton(
                                  icon: Icon(
                                    Icons.delete,
                                    size: 30,
                                    color: Colors.red[300],
                                  ),
                                  onPressed: () {
                                    doc.reference.delete();
                                    Fluttertoast.showToast(
                                        msg: "Senha apagada",
                                        toastLength: Toast.LENGTH_SHORT,
                                        gravity: ToastGravity.BOTTOM,
                                        backgroundColor: Colors.grey[500]);
                                  },
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                );
              }),
        ],
      ),

      // Floating button Adicionar
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(bottom: 15, right: 5),
        child: FloatingActionButton(
          onPressed: () => modalCreate(context),
          tooltip: 'Adicionar',
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class ColumnNenhumaSenhaEncontrada extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Imagem no_data_found
        Image(
          image: AssetImage('assets/no_data_found.png'),
          height: 300,
        ),
        Container(
          child: Text.rich(
            TextSpan(
              children: <TextSpan>[
                TextSpan(
                    text: 'Oops!\n',
                    style: TextStyle(
                        fontFamily: 'SanFrancisco',
                        fontSize: 35,
                        fontWeight: FontWeight.w500)),
                TextSpan(
                  text: 'Nenhuma senha encontrada',
                  style: TextStyle(
                    fontFamily: 'SanFrancisco',
                    fontSize: 23,
                    fontWeight: FontWeight.w300,
                  ),
                ),
              ],
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

DialogAddPass （我用来使 floatingActionButton 工作）

// Caixa de dialogo para adicionar senhas
import 'dart:convert';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

modalCreate(BuildContext context) {
  var form = GlobalKey<FormState>();

  // Pegando os valores dos campos
  var nomeDaSenha = TextEditingController();
  var senha = TextEditingController();

  showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Adicionar nova senha 📝'),
          titleTextStyle: TextStyle(
              fontSize: 20,
              color: Colors.black,
              fontFamily: "SanFrancisco",
              fontWeight: FontWeight.w500),
          content: Form(
            key: form,
            child: Container(
              // Deixando o Dialog menor
              height: MediaQuery.of(context).size.height / 4,
              width: MediaQuery.of(context).size.width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Nome da Senha',
                    style: TextStyle(fontFamily: "SanFrancisco", fontSize: 20),
                  ),
                  SizedBox(height: 5),
                  TextFormField(
                      // Passando os valores para a variavel nomeDaSenha
                      controller: nomeDaSenha,
                      textInputAction: TextInputAction.next,
                      decoration: InputDecoration(
                        hintText: 'Ex: Banco Itaú',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15),
                        ),
                      ),

                      // Tornando o campo obrigatório
                      validator: (value) {
                        if (value.trim().isEmpty) {
                          return "Preencha este campo";
                        }
                        return null;
                      }),
                  SizedBox(height: 15),
                  Text(
                    'Senha',
                    style: TextStyle(fontFamily: "SanFrancisco", fontSize: 20),
                  ),
                  SizedBox(height: 2),
                  TextFormField(
                      obscureText: true,
                      textInputAction: TextInputAction.go,
                      // Passando o valor para a variavel senha
                      controller: senha,
                      decoration: InputDecoration(
                        hintText: 'Ex: 12345',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15),
                        ),
                      ),
                      // Tornando o campo obrigatório
                      validator: (value) {
                        if (value.trim().isEmpty) {
                          return "Preencha este campo";
                        }
                        return null;
                      })
                ],
              ),
            ),
          ),

          // Botão Cancelar
          actions: <Widget>[
            Material(
              borderRadius: BorderRadius.circular(5),
              child: MaterialButton(
                minWidth: 10,
                child: Text(
                  "Cancelar",
                  style: TextStyle(fontSize: 15),
                ),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ),
            // Botão Adicionar
            Material(
              borderRadius: BorderRadius.circular(5),
              color: Colors.orange,
              child: MaterialButton(
                minWidth: 70,
                child: Text(
                  "Salvar",
                  style: TextStyle(color: Colors.white, fontSize: 15),
                ),
                onPressed: () async {
                  if (form.currentState.validate()) {
                    await FirebaseFirestore.instance.collection('senhas').add({
                      'nomeDaSenha': nomeDaSenha.text.trim(),
                      'senha': senha.text.trim(),
                      'data': Timestamp.now(),
                    });

                    Navigator.of(context).pop();

                    Fluttertoast.showToast(
                        msg: "Senha adicionada!",
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.BOTTOM,
                        backgroundColor: Colors.green);
                  }
                },
              ),
            ),
          ],
        );
      });
}

我希望我清楚，如果没有，请告诉我！ 谢谢！

Answer 1

您可以将 TextField 的文本和项目从快照数据传递到新的 function：

show_custom_dialog.dart

  showCustomDialog(String text, item) {
    var form = GlobalKey<FormState>();
    var nomeDaSenha = TextEditingController()..text = text;
    var senha = TextEditingController();
    
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            // ... other lines
            Material(
              borderRadius: BorderRadius.circular(5),
              color: Colors.orange,
              child: MaterialButton(
                minWidth: 70,
                child: Text(
                  "Editar",
                  style: TextStyle(color: Colors.white, fontSize: 15),
                ),
                onPressed: () async {
                  if (form.currentState.validate()) {
                   item.reference.update({ // Use the item here
                      'nomeDaSenha': nomeDaSenha.text.trim(),
                      'senha': senha.text.trim(),
                    }).whenComplete(() => Navigator.of(context).pop());

                   // ... other lines
                  }
                },
              ),
            ),
          ],
        );
      },
    );
  }

您也可以通过showDialog内部的Navigator.pop(context, [yourData])将数据从showDialog()传递到外部，然后在外部await 。

主页

// ... other lines
trailing: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
           IconButton(
              icon: Icon(
                Icons.edit,
                size: 30,
                color: Colors.yellow[800],
              ),
           onPressed: () async {
                 // This part i wanna import as another .dart file
---------------------------------------------------------------------------------
                 final data = await showCustomDialog(doc['nomeDaSenha'], snapshot.data.docs[i]);
                 // Do something with the data here (such as whether the call to firebase success), or trigger a toast after displaying the Dialog
---------------------------------------------------------------------------------
// ... other lines