Flutter: How to call a standalone widget from a different dart file when Onpressed

Question

I have a buttom sheet which appers when a button is click, and it was working fine when everything was on a single dart file, but because i have to use some of the widgets on different screens i decided to split the widgets into different dart files, now i have done that but when the buttons are clicked nothing happens same thing with the other widgets, so i guess it has something to do with how i set it

Bellow is the Bottomsheet code

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../widgets/calendarPicker.dart';

class NewTodo extends StatefulWidget {
  final Function addTx;

  NewTodo({this.addTx});
  @override
  _NewTodoState createState() => _NewTodoState();
}

class _NewTodoState extends State<NewTodo> {
  @override
  Widget build(BuildContextcontext) {
    showModalBottomSheet(
      backgroundColor: Colors.white,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
      context: context,
      builder: (_) {
        return GestureDetector(
          onTap: () {},
          // Where i started the code pasting from
          child: Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 0.000,
                child: Container(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(labelText: 'Title'),
                        controller: _titleController,
                        autofocus: true,
                        onSubmitted: null,
                        // onChanged: (val) {
                        //   titleInput = val;
                        // },
                      ),
                      TextField(
                        decoration: InputDecoration(labelText: 'Description'),
                        controller: _discriptionController,
                        onSubmitted: null,
                        // onChanged: (val) => amountInput = val,
                      ),
                      Container(
                        height: 70,
                        child: Row(
                          children: [
                            Text(selectedDateAndTime == null
                                    ? 'No Date Choosen'
                                    : DateFormat('MM/dd/yyyy HH:mm')
                                        .format(selectedDateAndTime)
                                // : DateFormat.yMd()
                                //     .format(_selectedDate),
                                ),
                            FlatButton(
                              textColor: Theme.of(context).primaryColor,
                              child: Icon(Icons.calendar_today),
                              // onPressed: () async {
                              //   var value = await _selectedTime();
                              // },
                              onPressed: () {
                                SelectDayAndTimeL();
                              },
                            ),
                          ],
                        ),
                      ),
                      RaisedButton(
                        child: Text('Save Todo'),
                        color: Theme.of(context).primaryColor,
                        textColor: Theme.of(context).textTheme.button.color,
                        onPressed: _submitData,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  void _submitData() {
    // if (_amountController.text.isEmpty) {
    //   return;
    // }
    final enteredTitle = _titleController.text;
    final enteredDescription = _discriptionController.text;

    if (enteredTitle.isEmpty) {
      return;
    }

    widget.addTx(
      enteredTitle,
      enteredDescription,
      selectedDateAndTime,
    );
    Navigator.of(context).pop();
  }

  final _titleController = TextEditingController();
  final _discriptionController = TextEditingController();
  var favorite;
  // DateTime _selectedDate;
  DateTime selectedDateAndTime;
  @override
  void dispose() {
    super.dispose();
    _discriptionController.dispose();
    _titleController.dispose();
  }
}

Then below is how i tried to call it on the main.dart and i also used same method on the other screen but it's not displaying the widget when the button is clicked

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:schedule_todu/widgets/new_todu.dart';

import './widgets/todu_list.dart';

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

class ItemList extends StatefulWidget {
  final Function addTx;
  ItemList({this.addTx});
  @override
  _ItemListState createState() => _ItemListState();
}

class _ItemListState extends State<ItemList> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: IconButton(icon: Icon(Icons.add), onPressed: null),
      ),
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {NewTodo();},
          ),
        ],
        title: Text('Todu Scheduled Tasks'),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {NewTodo();},
        backgroundColor: Colors.redAccent,
      ),
      body: SingleChildScrollView(child: Lists()),
    );
  }
}

Answer 1

In NewToDo there is no return widget in build check below,

    import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';

import '../widgets/calendarPicker.dart';

class NewTodo extends StatefulWidget {
  final Function addTx;

  NewTodo({this.addTx});
  @override
  _NewTodoState createState() => _NewTodoState();
}

class _NewTodoState extends State<NewTodo> {
  @override
  Widget build(BuildContextcontext) {

    //remove bottom sheet here
    
        return GestureDetector(
          onTap: () {},
          // Where i started the code pasting from
          child: Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 0.000,
                child: Container(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(labelText: 'Title'),
                        controller: _titleController,
                        autofocus: true,
                        onSubmitted: null,
                        // onChanged: (val) {
                        //   titleInput = val;
                        // },
                      ),
                      TextField(
                        decoration: InputDecoration(labelText: 'Description'),
                        controller: _discriptionController,
                        onSubmitted: null,
                        // onChanged: (val) => amountInput = val,
                      ),
                      Container(
                        height: 70,
                        child: Row(
                          children: [
                            Text(selectedDateAndTime == null
                                    ? 'No Date Choosen'
                                    : DateFormat('MM/dd/yyyy HH:mm')
                                        .format(selectedDateAndTime)
                                // : DateFormat.yMd()
                                //     .format(_selectedDate),
                                ),
                            FlatButton(
                              textColor: Theme.of(context).primaryColor,
                              child: Icon(Icons.calendar_today),
                              // onPressed: () async {
                              //   var value = await _selectedTime();
                              // },
                              onPressed: () {
                                SelectDayAndTimeL();
                              },
                            ),
                          ],
                        ),
                      ),
                      RaisedButton(
                        child: Text('Save Todo'),
                        color: Theme.of(context).primaryColor,
                        textColor: Theme.of(context).textTheme.button.color,
                        onPressed: _submitData,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }

  void _submitData() {
    // if (_amountController.text.isEmpty) {
    //   return;
    // }
    final enteredTitle = _titleController.text;
    final enteredDescription = _discriptionController.text;

    if (enteredTitle.isEmpty) {
      return;
    }

    widget.addTx(
      enteredTitle,
      enteredDescription,
      selectedDateAndTime,
    );
    Navigator.of(context).pop();
  }

  final _titleController = TextEditingController();
  final _discriptionController = TextEditingController();
  var favorite;
  // DateTime _selectedDate;
  DateTime selectedDateAndTime;
  @override
  void dispose() {
    super.dispose();
    _discriptionController.dispose();
    _titleController.dispose();
  }
}

Now in ItemList Screen the both onPress method should return bottomsheet like below,

showModalBottomSheet(
      backgroundColor: Colors.white,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
      context: context,
      builder: (_) {
    return NewToDo();
    });