我如何打印来自模态底部 sheet 的值到 dart+flutter 中的主脚手架体

Question

我创建了一个文本和图标按钮，按下该图标生成模态底部 sheet，因为我创建了一个单独的带有文本字段和提交按钮的飞镖文件当在文本字段上输入并单击提交按钮后，给定的输入字符串将打印在下面最后我调用了第一个 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),
        ),
      ],
    );
  }
}

下面是输出link

this is the output im achieving but i want the "Hello World" to be printed on top/main screen, right after the + add icon screen

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

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

而child class是

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

我如何打印来自模态底部 sheet 的值到 dart+flutter 中的主脚手架体

How do i print the value which is coming from modal bottom sheet to the main scaffold body in dart+flutter

dart

flutter

onpress

flutter-showmodalbottomsheet