A Flutter UI kit with 50 plus screens for beginners to learn.

Overview

Contra Flutter Kit

Flutter application built on top of contra wireframe kit. Thorough this project i will be developing all the screens in flutter and sharing in couple of series post.

Run and Build

To run the app with few dependencies not having null safety use below command

  • flutter run --no-sound-null-safety

To run the web with few dependencies not having null safety use below command

  • flutter run -d chrome --no-sound-null-safety

To take apk of the app with few dependencies not having null safety use below command

  • flutter build apk --no-sound-null-safety

To take build for the web with few dependencies not having null safety use below command

  • flutter build web --no-sound-null-safety

Kits

Contra flutter kit will be having screens developed in all the categories.

  • Onboarding
  • Login Forms
  • Menus
  • Dialogs
  • Toast
  • Chat Screens
  • Shopping screens
  • Blogs
  • Payment Screens
  • Alarm, Clock, Weather Screens
  • Data Charts
  • Map and Location
  • Content, Text Details
  • Menu And Settings

Screenshots

  • Onboarding and Splash screens

  • Login, Verification, Contact Us Forms

  • Chat Screens

  • Shopping Screen Types

  • Blog Screen Types

  • Payment Screen Types

  • Alarm, Clock, Weather Screens

  • Data Charts

  • Map and Location

  • Content, Text Details

  • Menu And Settings

Project Created & Maintained By

Sabarinathan

Mobile and Backend Engineer (Android | Flutter | Rails)

Mentions

Visitors Count

Loading

License

Copyright 2020 Sabarinathan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Scroll-Bar

    Scroll-Bar

    How can i get to show a scrollbar in chat example ?

    I've tried

            child: Scrollbar(
              isAlwaysShown: true,
              child: SingleChildScrollView(
                child: Container(
                  padding: EdgeInsets.all(24.0),
                  child: Column(
                      SizedBox(
                        height: 56,
                      ),
                      ContraText(
                        alignment: Alignment.centerLeft,
                        text: "List",
                      ),
                      SizedBox(
                        height: 24,
                      ),
                      ListView.builder(
                        shrinkWrap: true,
                        padding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: _items.length,
                        itemBuilder: (BuildContext context, int index) {
                           return ChatListItemWidget(
                             chat: _items[index],
                             callback: () {
                               _launchChatMessage(_items[index]);
                             },
                           );
                        },
                      ),
    . . .
    
    

    but it does not work

    opened by satyajitghana 3
  • Project not running

    Project not running

    Im trying to run the project but im getting gradle errors:

    • Where: Build file 'C:\Users\fabio\Desktop\ContraFlutterKit\android\app\build.gradle' line: 60

    • What went wrong: A problem occurred evaluating project ':app'.

    path may not be null or empty string. path='null'

    My flutter version is 1.22.0

    How to fix this?

    opened by fabiojansenbr 3
  • Project not running

    Project not running

    When trying to execute, the following errors were reported (repeatedly, several of them) ../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/src/render_picture.dart:20:9: Error: Type 'PictureInfo' not found. final PictureInfo picture;

    **lib/login/login_form_one.dart:33:23: Error: The getter 'SvgPicture' isn't defined for the class 'LoginFormTypeOne'.

    • 'LoginFormTypeOne' is from 'package:contraflutterkit/login/login_form_one.dart' ('lib/login/login_form_one.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'SvgPicture'. SvgPicture.asset( ^^^^^^^^^^**

    ../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/src/render_picture.dart:20:9: Error: 'PictureInfo' isn't a type. final PictureInfo picture; ^^^^^^^^^^^

    ### attached the execution log

    LOG-02172021.txt

    opened by thamiiaz 2
  • Open source license for this project

    Open source license for this project

    I want to use the project's theme and components for commercial projects but I was wondering what kind of license is applied to this project, illustrations and other resources since I couldn't find any of code that's mentioned.

    Thank you for sharing and working on this awesome project.

    opened by njovy 1
  • Fixed the flutter_svg version issue and resizeToAvoidBottomPadding issue of add_alarm_page.dart

    Fixed the flutter_svg version issue and resizeToAvoidBottomPadding issue of add_alarm_page.dart

    Hello, I just fixed the below error of flutter_svg package

    flutter_svg` package related issue which gives the below error
    `/Local/Pub/Cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/src/picture_stream.dart:88:26: Error: Type 'DiagnosticableMixin' not found.
    
    class PictureStream with DiagnosticableMixin {
    
                             ^^^^^^^^^^^^^^^^^^^
    

    By changing the flutter_svg: ^0.17.4 to flutter_svg: ^0.19.3 which is the latest version of flutter_svg.


    Also add_alarm_page.dart , Scaffold having property resizeToAvoidBottomPadding which is deprecated after Flutter v1.1.9, Replaced it with resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.

    Thank-you!

    opened by aniketambore 0
Releases(1.5)
Owner
Sabarinathan
Mobile Engineer(Android|Flutter) @fidisys
Sabarinathan
Code for the screens created with flutter

FlutterUI-Emojis Code for the screens created with Flutter. Design Credit - https://dribbble.com/shots/9094050-Online-Reservation/attachments/1177787?

Raja Yogan 55 Oct 27, 2022
A simple UI design with Login, Sign up and Home screens

assessment_task A simple UI design with Login, Sign up and Home screens. ?? ScreenShots If you find this repo helpful to you, please don't forget to s

Promise Amadi 7 Nov 2, 2022
A conceptual design for on boarding screens for mobile apps.

flutter_onboarding_ui_concept A conceptual design for on boarding screens for mobile apps. This app provides you with all the information you need to

CODEHOMIE 265 Dec 25, 2022
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible

flutter_neumorphic A complete, ready to use, Neumorphic ui kit for Flutter Try Flutter-Neumorphic on your browser : ?? https://flutter-neumorphic.fire

Idean 1.6k Jan 1, 2023
flukit is a Flutter UI Kit

A Flutter UI Kit. 一个Flutter UI组件库。

Flutter中国开源项目 4.7k Jan 3, 2023
Flutter - E Commerce UI KIT ( completely free for everyone )

Flutter E-Commerce UI KIT A powerful Flutter E-Commerce starter template that bootstraps development of your mobile application. Flutter E-Commerce St

Muhammad Furqan 307 Dec 24, 2022
Flutter Movie UI Kit

flutter_movie_uikit A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Dicky Reynaldi 2 Sep 12, 2021
Attempt to learn flutter and clone my favourite Google Keep App.

Note App Flutter Attempt to learn flutter and clone my favourite Google Keep App. Getting Started This project is a starting point for a Flutter appli

Akshat Soni 4 Oct 31, 2022
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 191 Dec 29, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Stephen Joel 1 May 24, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 2022
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

CABREX 9 Nov 8, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

null 1 Mar 8, 2022
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

Trần Văn Nguyên 21 Nov 21, 2022
A Flutter staggered grid view

flutter_staggered_grid_view A Flutter staggered grid view which supports multiple columns with rows of varying sizes. Features Configurable cross-axis

Romain Rastel 2.7k Dec 30, 2022
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 434 Jan 7, 2023
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 733 Jan 7, 2023