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

Question

ive created a text and icon button, onpressing that icon modal bottom sheet gets generated, in that and ive created a separate dart file with text field and a submit button when giving an input on text field and after clicking on submit button the given input string will be printed below atlast i called the function in first dart file but i want the text to be printed on the main scaffold page. Below is the main code

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

and below code is for creating a text field and submit button

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

and below is the output 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

How should i solve this??

Answer 1

I just slightly edited your code

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

and the child class is

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