The argument type 'CommentBox' can't be assigned to the parameter type 'Widget'

Question

I am working on an Android application. I want users to comment on the application and on the test.dart page I get the error The argument type 'CommentBox' can't be assigned to the parameter type 'Widget' I have a constructor called CommentBox. But it doesn't let me use it for test.dart.

This is the test.dart code:

import 'package:city_travel_guide/pages/comment/comment.dart';
import 'package:flutter/material.dart';

class TestMe extends StatefulWidget {
  @override
  _TestMeState createState() => _TestMeState();
}

class _TestMeState extends State<TestMe> {
  final formKey = GlobalKey<FormState>();
  final TextEditingController commentController = TextEditingController();
  List filedata = [
    {
      'name': 'Adeleye Ayodeji',
      'pic': 'https://picsum.photos/300/30',
      'message': 'I love to code'
    },
    {
      'name': 'Biggi Man',
      'pic': 'https://picsum.photos/300/30',
      'message': 'Very cool'
    },
    {
      'name': 'Biggi Man',
      'pic': 'https://picsum.photos/300/30',
      'message': 'Very cool'
    },
    {
      'name': 'Biggi Man',
      'pic': 'https://picsum.photos/300/30',
      'message': 'Very cool'
    },
  ];

  Widget commentChild(data) {
    return ListView(
      children: [
        for (var i = 0; i < data.length; i++)
          Padding(
            padding: const EdgeInsets.fromLTRB(2.0, 8.0, 2.0, 0.0),
            child: ListTile(
              leading: GestureDetector(
                onTap: () async {
                  // Display the image in large form.
                  print("Comment Clicked");
                },
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: new BoxDecoration(
                      color: Colors.blue,
                      borderRadius: new BorderRadius.all(Radius.circular(50))),
                  child: CircleAvatar(
                      radius: 50,
                      backgroundImage: NetworkImage(data[i]['pic'] + "$i")),
                ),
              ),
              title: Text(
                data[i]['name'],
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              subtitle: Text(data[i]['message']),
            ),
          )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Comment Page"),
        backgroundColor: Colors.pink,
      ),
      body: Container(
        child: CommentBox(
          userImage:
              "https://lh3.googleusercontent.com/a-/AOh14GjRHcaendrf6gU5fPIVd8GIl1OgblrMMvGUoCBj4g=s400",
          child: commentChild(filedata),
          labelText: 'Write a comment...',
          withBorder: false,
          errorText: 'Comment cannot be blank',
          sendButtonMethod: () {
            if (formKey.currentState.validate()) {
              print(commentController.text);
              setState(() {
                var value = {
                  'name': 'New User',
                  'pic':
                      'https://lh3.googleusercontent.com/a-/AOh14GjRHcaendrf6gU5fPIVd8GIl1OgblrMMvGUoCBj4g=s400',
                  'message': commentController.text
                };
                filedata.insert(0, value);
              });
              commentController.clear();
              FocusScope.of(context).unfocus();
            } else {
              print("Not validated");
            }
          },
          formKey: formKey,
          commentController: commentController,
          backgroundColor: Colors.black,
          textColor: Colors.white,
          sendWidget: Icon(Icons.send_sharp, size: 30, color: Colors.white),
        ),
      ),
    );
  }
}

This is the comment.dart:

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

class CommentBox {
  Widget child;
  dynamic formKey;
  dynamic sendButtonMethod;
  dynamic commentController;
  String userImage;
  String labelText;
  String errorText;
  Widget sendWidget;
  Color backgroundColor;
  Color textColor;
  bool withBorder;

  //Constructor
  CommentBox(
      {this.child,
      this.formKey,
      this.sendButtonMethod,
      this.commentController,
      this.userImage,
      this.labelText,
      this.errorText,
      this.sendWidget,
      this.backgroundColor,
      this.textColor,
      this.withBorder});

  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: child),
        Divider(
          height: 1,
        ),
        ListTile(
          tileColor: backgroundColor,
          leading: Container(
            height: 40.0,
            width: 40.0,
            decoration: new BoxDecoration(
                color: Colors.blue,
                borderRadius: new BorderRadius.all(Radius.circular(50))),
            child: CircleAvatar(
                radius: 50, backgroundImage: NetworkImage(userImage)),
          ),
          title: Form(
            key: formKey,
            child: TextFormField(
              maxLines: 4,
              minLines: 1,
              cursorColor: textColor,
              style: TextStyle(color: textColor),
              controller: commentController,
              decoration: InputDecoration(
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: textColor),
                ),
                focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                border: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                labelText: labelText,
                focusColor: textColor,
                fillColor: textColor,
                labelStyle: TextStyle(color: textColor),
              ),
              validator: (value) => value.isEmpty ? errorText : null,
            ),
          ),
          trailing: OutlineButton(
            highlightedBorderColor: Colors.orange,
            onPressed: sendButtonMethod,
            borderSide: BorderSide.none,
            child: sendWidget,
          ),
        ),
      ],
    );
  }
}

Answer 1

the previous message is not entirely correct, so:

import 'package:flutter/material.dart';

class CommentBox extends StatelessWidget {
  final Widget child;
  final dynamic formKey;
  final dynamic sendButtonMethod;
  final dynamic commentController;
  final String userImage;
  final String labelText;
  final String errorText;
  final Widget sendWidget;
  final Color backgroundColor;
  final Color textColor;
  final bool withBorder;

  //Constructor
  CommentBox(
      this.child,
    this.formKey,
      this.sendButtonMethod,
      this.commentController,
      this.userImage,
      this.labelText,
      this.errorText,
      this.sendWidget,
      this.backgroundColor,
      this.textColor,
      this.withBorder );
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: child),
        Divider(
          height: 1,
        ),
        ListTile(
          tileColor: backgroundColor,
          leading: Container(
            height: 40.0,
            width: 40.0,
            decoration: new BoxDecoration(
                color: Colors.blue,
                borderRadius: new BorderRadius.all(Radius.circular(50))),
            child: CircleAvatar(
                radius: 50, backgroundImage: NetworkImage(userImage)),
          ),
          title: Form(
            key: formKey,
            child: TextFormField(
              maxLines: 4,
              minLines: 1,
              cursorColor: textColor,
              style: TextStyle(color: textColor),
              controller: commentController,
              decoration: InputDecoration(
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: textColor),
                ),
                focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                border: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                labelText: labelText,
                focusColor: textColor,
                fillColor: textColor,
                labelStyle: TextStyle(color: textColor),
              ),
              validator: (value) {if (value == null || value.isEmpty) {return "some text";} return null;},
            ),
          ),
          trailing: OutlinedButton(
            style: OutlinedButton.styleFrom(
            side: BorderSide.none,),
            child: sendWidget,
            onPressed: sendButtonMethod,
          ),
        ),
      ],
    );
  }
}

you should use OutlinedButton, because OutlineButton is deprecated

Answer 2

You need to extend your CommentBox with StatelessWidget , make your fields final , and override build method , like this

import 'package:flutter/material.dart';

class CommentBox extends StatelessWidget {
  final Widget child;
  final dynamic formKey;
  final dynamic sendButtonMethod;
  final dynamic commentController;
  final String userImage;
  final String labelText;
  final String errorText;
  final Widget sendWidget;
  final Color backgroundColor;
  final Color textColor;
  final bool withBorder;

  //Constructor
  CommentBox(
      {this.child,
      this.formKey,
      this.sendButtonMethod,
      this.commentController,
      this.userImage,
      this.labelText,
      this.errorText,
      this.sendWidget,
      this.backgroundColor,
      this.textColor,
      this.withBorder});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: child),
        Divider(
          height: 1,
        ),
        ListTile(
          tileColor: backgroundColor,
          leading: Container(
            height: 40.0,
            width: 40.0,
            decoration: new BoxDecoration(
                color: Colors.blue,
                borderRadius: new BorderRadius.all(Radius.circular(50))),
            child: CircleAvatar(
                radius: 50, backgroundImage: NetworkImage(userImage)),
          ),
          title: Form(
            key: formKey,
            child: TextFormField(
              maxLines: 4,
              minLines: 1,
              cursorColor: textColor,
              style: TextStyle(color: textColor),
              controller: commentController,
              decoration: InputDecoration(
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: textColor),
                ),
                focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                border: UnderlineInputBorder(
                    borderSide: BorderSide(color: textColor)),
                labelText: labelText,
                focusColor: textColor,
                fillColor: textColor,
                labelStyle: TextStyle(color: textColor),
              ),
              validator: (value) => value.isEmpty ? errorText : null,
            ),
          ),
          trailing: OutlineButton(
            highlightedBorderColor: Colors.orange,
            onPressed: sendButtonMethod,
            borderSide: BorderSide.none,
            child: sendWidget,
          ),
        ),
      ],
    );
  }
}