How to add Widget dynamically on button click flutter?

Published July 27, 2021

In this flutter example we will learn how to add widget dynamically on button click. Here we are using the statefull widget to maintain the adding widget state. We are adding the widgets to List and updating to listview.

Let's get started

Step 1: Create Flutter application

Step 2: Create a statefull widget

Step 3: Take a List of type widget to maintain the dynamic widgets

List<Widget> _cardList = [];

void _addCardWidget() {
  setState(() {


The _card() method will return the widget with below widget items

Widget _card() {
  return Container(
    height: 80,
    margin: EdgeInsets.only(top: 5,left: 8,right: 8),
    decoration: new BoxDecoration(
      borderRadius: BorderRadius.circular(16),
    child: Center(
      child: ListTile(
        leading: CircleAvatar(
          radius : 28 ,
          backgroundColor:  Colors.white ,
          child: CircleAvatar(
            radius:  26,
            backgroundImage:  NetworkImage(
        title: Text(
          "Freedom Fighter",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700,color: Colors.deepPurple),
        subtitle: Text(
          'Freedom Fighter',
          style: TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 16,
              color: Colors.white),
        trailing: Card(
          elevation: 1,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: Container(
              width: 50,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                      style: TextStyle(
                          fontSize: 20, color: Colors.grey)),
                    width: 1,
                    textDirection: TextDirection.rtl,
                    size: 20,
                    color: Colors.grey,



Step 4: Call this method on button event. Here we are using the FloatingActionButton to add widgets dynamically

  onPressed: _addCardWidget,
  tooltip: 'Add',
  child: Icon(Icons.add),



Step 5: Pass the List widgets to listview by Listview.Builder widget


  itemCount: _cardList.length,
    itemBuilder: (context,index){
  return _cardList[index];


Step 6: Let's run the application on physical device or emulator/simulator

Flutter how to add dynamic widgets




Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions