kitcod_uikit_flutter 0.1.0+8

A UIKit from Kitcod.

kitcod_uikit_flutter

Kitcod UI Kit

Getting Started

It consists of UI template screens that can be integrated with backend data. UI Screens can be accessed from 'lib' folder and can be accessed from a folder in the same level directory ('example' in our case). Child folder named 'Widgets' contains the following UI template screens:

Import the package:

import 'package:kitcod_uikit_flutter/kitcod_uikit_flutter.dart';

1. User Profile, following parameters are needed: name city email about button

   UserProfileView(
        headerView: HeaderView(
          backgroundColor: Colors.indigoAccent.withOpacity(0.1),
          leftSideIcon: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: const Icon(
              Icons.arrow_back_outlined,
              color: Colors.black,
            ),
          ),
          header: const Text(
            "Profile Overview",
            style: TextStyle(color: Colors.black),
          ),
          headerAlignment: Alignment.centerLeft,
        ),
        name: const Text(
          "Bilal",
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        city: const Text(
          "Islamabad",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        email: const Text(
          "[e-mail]",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        about: const Text(
          "Flutter Developer",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        button: Button(
          name: "Follow",
          onPressed: () {},
          backgroundColor: Colors.indigoAccent,
          textStyle: const TextStyle(color: Colors.white),
        ),
      ),

2. News Feed following parameters are needed feedGroupsArray (Group stories) feedPostsArray (Feed Posts) name userName profileImageUrl groupTags (Joined group names)

    NewsFeed(
        headerView: HeaderView(
          backgroundColor: Colors.white.withOpacity(0.1),
          header: const Text(
            "News Feed",
            style: TextStyle(color: Colors.black),
          ),
          headerAlignment: Alignment.centerLeft,
        ),
        feedGroupsArray: feedGroupsArray,
        feedPostsArray: feedPostsArray,
        name: "Bilal Shahid",
        userName: "@bilal_sh",
        profileImageUrl: "https://picsum.photos/201",
        groupTags: const [
          "#Brothers of mirzapur",
          "#Wishes and friends"
        ],
        groupList: feedGroupsArraySimple,
      )

3. Groups following parameters are needed groupsList (FeedGroup type list)

   Groups(
	  headerView: HeaderView(
	    backgroundColor: Colors.white.withOpacity(0.1),
	    header: const Text(
	      "Groups",
	      style: TextStyle(color: Colors.black),
	    ),
	    headerAlignment: Alignment.centerLeft,
	    leftSideIcon: IconButton(
	      onPressed: () {
		Navigator.pop(context);
	      },
	      icon: const Icon(
		Icons.arrow_back_outlined,
		color: Colors.black,
	      ),
	    ),
	  ),
	  groupsList: feedGroupsArray,
	),

4. Create Post following parameters are needed name userName porfileImageUrl groupTags (Joined group names) groupsList (FeedGroup type list) postType (enum for the list of post type options) moreOptions (enum for the list of more attachment options)

    CreatePost(
          headerView: HeaderView(
            backgroundColor: Colors.white.withOpacity(0.1),
            leftSideIcon: IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: const Icon(
                Icons.arrow_back_outlined,
                color: Colors.black,
              ),
            ),
            header: const Text(
              "Create New",
              style: TextStyle(color: Colors.black),
            ),
            headerAlignment: Alignment.centerLeft,
          ),
          name: "Bilal Shahid",
          userName: "@bilal_sh",
          porfileImageUrl: "https://picsum.photos/201",
          groupTags: const [
            "#Brothers of mirzapur",
            "#Wishes and friends"
          ],
          groupsList: feedGroupsArraySimple,
          postType: const [PostType.announcement, PostType.poll],
          moreOptions: const [
            MoreOptions.image,
            MoreOptions.video,
            MoreOptions.audio
          ])

5. Create Group There are three different create group screens: a) Create group b) Create group community c) Create group settings