fancylist

Description:

fancylist

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"
}


],
}

copied to clipboard
2nd Step-> How to call the list #


body: Padding(
padding: const EdgeInsets.only(left: 21, right: 21),
child: CatalogList(),
),
copied to clipboard
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(),
),
);
}
}

copied to clipboard
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