Custom dynamic listview in flutter

App Developer March 26, 2025

 Today in this post we will learn to create a custom dynamic listview and you can connect the dynamic list with firebase. And from there you can display the data as per your requirement in the dynamic list. We will use cards to create the dynamic list and it is created using multiple text on the card. You can also take images if you want and you can make any custom design as per your requirement.

First of all create a project in Android Studio Flutter then copy and paste the code given by us in your project. You can name the app screen anything you like.


InvestmentScreen.dart
       
       
       import 'package:flutter/material.dart';
import 'package:stocks/util/bluecolor.dart';


class InvestmentScreen extends StatefulWidget {
  @override
  _InvestmentScreenState createState() => _InvestmentScreenState();
}

class _InvestmentScreenState extends State {
  int _selectedIndex = 0;
  bool _isPortfolioSelected = false; // New variable to track portfolio selection

  void _onItemTapped(int index) {
    if (_selectedIndex == index) return; // If the same screen is already selected, do nothing

    setState(() {
      _selectedIndex = index;
      _isPortfolioSelected = index == 1; // Set to true if Portfolio is selected
    });

    // Navigate to the correct screen
    
  }

  final List> investments = List.generate(
    8,
        (index) => {
      'title': 'Nifty 50',
      'type': 'NFO',
      'category': 'NRML',
      'count': '0.00',
    },
  );

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: MyColors.blue,
        title: Text("Custom Dynamic List", style: TextStyle(color: Colors.white)),
        leading: Icon(Icons.menu, color: Colors.white),

      ),
      body: Column(
        children: [

          Expanded(
            child: ListView.builder(
              itemCount: investments.length,
              itemBuilder: (context, index) {
                return Card(
                  elevation: 0.1,
                  color: Colors.white,
                  margin: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  child: Container(
                    height: 80,
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.all(12),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(investments[index]['title']!,
                                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                            SizedBox(height: 4),
                            Text(investments[index]['type']!,
                                style: TextStyle(color: yellow.yello, fontSize: 12)),
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                              decoration: BoxDecoration(
                                color: MyColors.blue.withOpacity(0.2), // 20% opacity
                                borderRadius: BorderRadius.circular(4),
                              ),
                              child: Text(
                                investments[index]['category']!,
                                style: TextStyle(color: MyColors.blue, fontSize: 12),
                              ),
                            ),

                            SizedBox(height: 2),
                            Text("Count: ${investments[index]['count']}",
                                style: TextStyle(color: Colors.black54, fontSize: 14)),
                          ],
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),

    );
  }
}

  Code Explanation

  • In this code two packages have been imported. Color and material package have been imported. If you want you can remove the color package and you can give the color directly.
  • A class has been created with the name Investmentscreen in which all the codes of the list have been kept. You can also change the name of the class as per the need, this will not cause any difference in the list.
  • An array named finallist is created inside which the list data is stored which is displayed inside the list.
  • An extension cord is built inside the scaffold.
  • listview.builder has been used to create this list. Whenever we have to make a big list then it is better to use listview builder.
Output

Custom dynamic listview in flutter



App Developer

Posted by App Developer

Post a Comment

0 Comments