FancyList : Custom Modern Look ListView

Fancy List is a Custom and Modern look ListView in flutter. It is ver easy to implent with JSON and its functionaly can be changed with JSON file

Features

1.) Change color of rounded rectangular box
2.) Modern Look
3.) Implement Images
4.) Name and description can be given to the list with JSON
5.) List will be implemeted with the help of JSON
6.) Functionality of List easily changable with JSON file

Getting started

prerequisites

1.) Velocity_x dependency needed
2.) Json file needed in the below given format

Usage

Follow these steps to implement custom list in your project

1st Step -> create a JSON file

create a json file in this format

Do not forget to add nextpager - in nextpager your app pages routes are written

{
    "products": [
        {
            "id": 1,
            "name": "30 days fit",
            "desc": "30 Days Obese to fit challenge",
            "nextPager": "/listDone",
            "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOiJ-wZHOAdfTHd18YvpMgRDTtCJMOUr8NRJ1O-0r31dozvX1X9P6UYiKVyV_LsjzhMy6OJx67zyvZ1vHrj4RlhJO_Vf8Onihd4zluASFN085jNqtXSd0JlCpept9bfbiEMCMyOb9y3ssSfvaq_EunfrAodyJVHcKtSW4GuCYUphp5bIo9wiXL7Kf8Mg/s320/White%20with%20Mint%20Tooth%20Icon%20Dental%20LogoWhite%20with%20Mint%20Tooth%20Icon%20Dental%20Logo.png"
        },
        {
            "id": 2,
            "name": "Healthy Diet",
            "desc": "Best healthy diet for kids",
            "nextPager": "/listDone",
            "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIT-DUwDcYjs76JoZHfqZ8lxFbEMu2c35mECBMFiaGf6C21I_CYz7kFStnp_CaJnKk1bWjtCJGBcJ2zTLl1jwy5_gMEte3HrTirHpQNs6Bjlh2CKE586TvUUZcmg61Q2aGays7T5RimW7bDqv4E4aFT0DRDSXJ7hFjHrxaCvDzy6smqy1IObtKZ5wsFA/s320/White%20with%20Mint%20Tooth%20Icon%20Dental%20LogoWhite%20with%20Mint%20Tooth%20Icon%20Dental%20Logo%20(2).png"
        },
        {
            "id": 3,
            "name": "Yoga for Kids",
            "desc": "A fit, healthy body — that is the best fashion statement",
            "nextPager": "/Yoga",
            "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GTrlEzlVJomoF0HXcS-79RaMwe254PsSUx3rLXO4V5vpDGJ5f2kTCglhJn-bawKnbCx3vehHy7lEsKFUHTq2ofzpcR91GYFrkoYj5MbpXZ65U6_-xKyY03BGj4YJyv71IBpB5vYmbwv6RSKX7SeNJssxGqkKjsyPl7yN5Wp1zeryKopJpN8qNgJjIQ/s320/White%20with%20Mint%20Tooth%20Icon%20Dental%20LogoWhite%20with%20Mint%20Tooth%20Icon%20Dental%20Logo%20(1).png"
        }
        
        
    ],
}

2nd Step-> How to call the list

body: Padding(
        padding: const EdgeInsets.only(left: 21, right: 21),
        child: CatalogList(),
      ),

full code example

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import "package:my_new_package/my_new_package.dart";

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  void initState() {
    super.initState();
    loadData();
  }

  loadData() async {
    final catalogJson = await rootBundle.loadString("lib/assets/customList.json");
    final decodedData = jsonDecode(catalogJson);
    var productData = decodedData["products"];

    CatalogModel.items =
        List.from(productData).map<Item>((item) => Item.fromMap(item)).toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Custom Package testing",
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.done_all),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 21, right: 21),
        child: CatalogList(),
      ),
    );
  }
}

ScreenShot of the list

If anyone faces any issue regarding this fancylist project, You can easly raise the issue and also contribute to this project