flutterdartonpressflutter-showmodalbottomsheet

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


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 ??


Solution

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