Home > Net >  How to put a Widget in a Container
How to put a Widget in a Container

Time:10-10

Assumptions and what I want to achieve

I've added a background to the original TODO list code, and now I'm getting an error because there are two children.

Problems and error messages.

The argument for the named parameter 'child' was already specified.

The argument for the named parameter 'child' was already specified. ``` The message is probably due to two children.

```` The argument for the named parameter 'child' was already specified.

  @override
  Widget build(BuildContext context) {
    double _width = MediaQuery.of(context).size.width;
    double _height = MediaQuery.of(context).size.height;
    return Scaffold(


        // Display the AppBar and set the title
      appBar: AppBar(
        title: Text('List of Lists'),

      ),
      body: Container(
      height: _height,
      width: _width,
      decoration: BoxDecoration(
      gradient: LinearGradient(
      colors: [
      const Color(0xffe4a972).withOpacity(0.6),
      const Color(0xff9941d8).withOpacity(0.6), const Color(0xff9941d8).withOpacity(0.6),
      ],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      ),
      ),

     //↓ Error here
        child: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(

              child: ListTile(
              title: Text(todoList[index]),
            ),
          );
        },
      ),

 //↓ Error here
 child: FloatingActionButton(
           onPressed: () async {
             // "push" to transition to new screen
             // receive the value passed from the add list screen
             final newListText = await Navigator.of(context).push(
               MaterialPageRoute(builder: (context) {
                 // specify the list add screen as the destination screen
                 return TodoAddPage();
               }),
             );
             if (newListText ! = null) {
               // note that newListText will be null if we cancel it
               setState(() {
                 // add list
                 todoList.add(newListText);
               });
             }
           },
           child: Icon(Icons.add),
         ),
      ),
      // Create a ListView based on the data
    );
  }
}

Things I've tried

I changed child to childen. I searched for a way to put a listview and floatingaction widget in a container, but I couldn't find anything.

CodePudding user response:

You should pass the FloatingActionButton to the Scaffold widget instead of the Container:

 @override
  Widget build(BuildContext context) {
    double _width = MediaQuery.of(context).size.width;
    double _height = MediaQuery.of(context).size.height;
    return Scaffold(


        // Display the AppBar and set the title
      appBar: AppBar(
        title: Text('List of Lists'),

      ),
      body: Container(
      height: _height,
      width: _width,
      decoration: BoxDecoration(
      gradient: LinearGradient(
      colors: [
      const Color(0xffe4a972).withOpacity(0.6),
      const Color(0xff9941d8).withOpacity(0.6), const Color(0xff9941d8).withOpacity(0.6),
      ],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      ),
      ),

        child: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(

              child: ListTile(
              title: Text(todoList[index]),
            ),
          );
        },
      ),

 
      ),
      floatingActionButton: FloatingActionButton(
           onPressed: () async {
             // "push" to transition to new screen
             // receive the value passed from the add list screen
             final newListText = await Navigator.of(context).push(
               MaterialPageRoute(builder: (context) {
                 // specify the list add screen as the destination screen
                 return TodoAddPage();
               }),
             );
             if (newListText ! = null) {
               // note that newListText will be null if we cancel it
               setState(() {
                 // add list
                 todoList.add(newListText);
               });
             }
           },
           child: Icon(Icons.add),
         ),
      // Create a ListView based on the data
    );
  }
}

CodePudding user response:

Not all widgets accept multiple child widgets. check official documentation. For you question you can easily add a FloatingActionButton to the scaffold widget (not to Container) like below. I recommend to read about flutter layouts to get a good understanding.

@override
  Widget build(BuildContext context) {
    double _width = MediaQuery.of(context).size.width;
    double _height = MediaQuery.of(context).size.height;
    return Scaffold(


        // Display the AppBar and set the title
      appBar: AppBar(
        title: Text('List of Lists'),

      ),
      body: Container(
      height: _height,
      width: _width,
      decoration: BoxDecoration(
      gradient: LinearGradient(
      colors: [
      const Color(0xffe4a972).withOpacity(0.6),
      const Color(0xff9941d8).withOpacity(0.6), const Color(0xff9941d8).withOpacity(0.6),
      ],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      ),
      ),//↓ Error here
        child: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(

              child: ListTile(
              title: Text(todoList[index]),
            ),
          );
        },
      ),
        ),
 floatingActionButton:FloatingActionButton(
           onPressed: () async {
             // "push" to transition to new screen
             // receive the value passed from the add list screen
             final newListText = await Navigator.of(context).push(
               MaterialPageRoute(builder: (context) {
                 // specify the list add screen as the destination screen
                 return TodoAddPage();
               }),
             );
             if (newListText ! = null) {
               // note that newListText will be null if we cancel it
               setState(() {
                 // add list
                 todoList.add(newListText);
               });
             }
           },
           child: Icon(Icons.add),
         ),   // Create a ListView based on the data
    );
  }
  • Related