如何在 dart+flutter 中打印从模态底部表单到主脚手架主体的值

Question

我创建了一个文本和图标按钮，按下该图标 生成模态底部表单，其中 我创建了一个单独的 dart 文件，其中包含文本字段和提交按钮 在文本字段中输入内容并单击提交按钮后，给定的输入字符串将打印在下面 最后我在第一个 dart 文件中调用了该函数 但我希望将文本打印在主脚手架页面上。 下面是主要代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:practice1/StatefulModalbtn.dart';

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

class Modalbtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Modal Bottom Test'),
        ),
        body: Column(
          children: <Widget>[Mymodal()],
        ),
      ),
    );
  }
}

class Mymodal extends StatelessWidget {
  const Mymodal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'Press the icon to select the Tractor model',
            style: TextStyle(fontSize: 15),
          ),
          IconButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return Container(
                      height: 200,
                      child: Column(
                        children: <Widget>[StatefulModalbtn()],
                      ),
                    );
                  });
            },
            icon: Icon(Icons.add),
            iconSize: 20,
          )
        ],
      ),
    );
  }
}

，下面的代码用于创建文本字段和提交按钮

import 'package:flutter/material.dart';

class StatefulModalbtn extends StatefulWidget {
  const StatefulModalbtn({Key? key}) : super(key: key);

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

class _StatefulModalbtnState extends State<StatefulModalbtn> {
  TextEditingController textController = TextEditingController();
  String displayText = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: textController,
          maxLines: null,
        ),
        ElevatedButton(
            onPressed: () {
              setState(() {
                displayText = textController.text;
              });
            },
            child: Text('Submit')),
        Text(
          displayText,
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

，下面是输出链接

this是我实现的输出，但我希望将“Hello World”打印在顶部/主屏幕上，就在+添加图标屏幕之后

我应该如何解决这个问题？

Answer 1

我只是稍微编辑了你的代码

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main1.dart';

void main() {
  runApp(MaterialApp(
    home: Modalbtn(),
  ));
}

class Modalbtn extends StatefulWidget {
  @override
  _ModalbtnState createState() => _ModalbtnState();
}

class _ModalbtnState extends State<Modalbtn> {
  String value = "0";
  // Pass this method to the child page.
  void _update(String newValue) {
    setState(() => value = newValue);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            IconButton(
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: 200,
                        child: Column(
                          children: [StatefulModalbtn(update: _update)],
                        ),
                      );
                    });
              },
              icon: Icon(Icons.add),
              iconSize: 20,
            ),
            Text(
              value,
              style: TextStyle(fontSize: 40),
            ),
          ],
        ),
      ),
    );
  }
}

子类是

import 'package:flutter/material.dart';

class StatefulModalbtn extends StatelessWidget {
  final ValueChanged<String> update;
  StatefulModalbtn({required this.update});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => update("100"), // Passing value to the parent widget.

      child: Text('Update (in child)'),
    );
  }
}