A basic UI toolkit to get you started with flutter application development.

Overview

Basic UI Toolkit [Theme: School]

Featured image

Descrption

A basic UI toolkit to get you started with flutter application development.

Widget List:

  • SchoolToolkitButton: Button with a busy indicator
  • SchoolLocationWidget: Card to display school information
  • OutlinedButton: Button with only outline border with a busy indicator
  • SchoolToolkitTextField: Custom text field
  • SchoolToolkitRoleButton: Animated role selection button
  • OverlappingButtonCard: Overlapping container with a hovering button on the bottom
  • Calendar: Calendar with two view states: [expanded(shows the entire calendar), shrink(shows only a week)]
  • NepaliCalendar: Nepali Calendar with two view states: [expanded(shows the entire calendar), shrink(shows only a week)]
  • EventCard: Displays the time and event
  • RoutineCard: Displays the Name of class, Subject, Time and Professor.
  • DeadlineCard: Display a deadline
  • AssignmentCard: Displays the assignment, deadline, subject with optional parameters to handle upload
  • HighlightedIcon: Custom container that highlights the icon passed. Takes in an optional busy parameter to display loading indicator.
  • FeaturedVideoCard: Display a featured video thumbnail with a title.
  • VideoListTileCard: Display a listtile with thumbnail, title and author.
  • ProfileCard: Custom profile card.
  • BusRouteWidget: Display a bus route. Takes in title and a subtitle.
  • NoticeCard: Custom notice widget that takes in title, subtitle, formatted date string with exposed on tap handler.
  • LabelCard: Display a custom text label. Takes in label string, width, height, text style and color.

Example

The example file contains a catalog for all the available widgets.

SchoolToolkitButton

SchoolToolkitButton(
    onPressed: () {
        // handle on pressed
    },
    busy: true, // defaults to false
    label: 'Text Label'.toUpperCase(),
),

toolkit button

SchoolLocationWidget

SchoolLocationWidget(
    imageURL: 'http://via.placeholder.com/350x350',
    address: 'Area 69',
    name: 'Alien High School',
),

school location widget

OutlinedButton

OutlinedButton(
    onPressed: () {
        // handle on pressed
    },
    busy: true, // defaults to false
    label: 'Edit Info'.toUpperCase(),
),

outlined button

SchoolToolkitTextField

SchoolToolkitTextField(
    hint: 'Custom text field',
    controller: ...,
    errorText: ...,
    key: ...,
    label: ...,
    obscureText: ...,
    onChanged: ...,
    onFieldSubmitted: ...,
    onSaved: ...,
    onTap: ...,
),

custom text field

SchoolToolkitRoleButton

SchoolToolkitRoleButton(
    iconData: FontAwesomeIcons.userGraduate,
    label: 'Student'.toUpperCase(),
    selected: true, // defaults to false
),

Role button

OverlappingButtonCard

OverlappingButtonCard(
    width: 354,
    height: 589,
    label: 'Button label'.toUpperCase(),
    onPressed: () {
        // handle on presssed
    },
    chld: ...,
    padding: ..., // optional field
),

overlapping button card

Calendar

Calendar(
    startExpanded: true, // set this to false if you need the calendar to be built shrinked (show only active week)
    onDateSelected: (date) {
        print('Selected date: $date');
        // handle date selection
    },
    onNextMonth: (date) {
        print('Next month: $date');
        // handle on next month.
    },
    onPreviousMonth: (date) {
        print('Previous month: $date');
        // handle previous month
    },
    calendarEvents: [
        CalendarEvent.fromDateTime(
            dateTime: DateTime.now(),
            color: SchoolToolkitColors.red,
        ),
    ],
    recurringEventsByDay: [
        CalendarEvent.fromDateTime(
            dateTime: DateTime(2020, 7, 1),
            color: SchoolToolkitColors.blue,
        ),
        CalendarEvent.fromDateTime(
            dateTime: DateTime(2020, 7, 2),
            color: SchoolToolkitColors.red,
        ),
    ],
    recurringEventsByWeekday: [
        CalendarEvent.fromWeekDay(
            weekDay: DateTime.sunday,
            color: SchoolToolkitColors.green,
            holiday: true,
        ),
    ],
),

calendar

NepaliCalendar

Important: Please note the date returned by the NepaliCalendar methods use the NepaliDateTime instead of DateTime class

NepaliCalendar(
    startExpanded: true, // set this to false if you need the calendar to be built shrinked (show only active week)
    onDateSelected: (date) {
        print('Selected date: $date');
        // handle date selection
    },
    onNextMonth: (date) {
        print('Next month: $date');
        // handle on next month.
    },
    onPreviousMonth: (date) {
        print('Previous month: $date');
        // handle previous month
    },
    calendarEvents: [
        NepaliCalendarEvent.fromDateTime(
            dateTime: NepaliDateTime.now(),
            color: SchoolToolkitColors.red,
        ),
    ],
    recurringEventsByDay: [
        NepaliCalendarEvent.fromDateTime(
            dateTime: NepaliDateTime(2020, 7, 1),
            color: SchoolToolkitColors.green,
        ),
    ],
    recurringEventsByWeekday: [
        NepaliCalendarEvent.fromWeekDay(
            weekDay: 1,
            color: SchoolToolkitColors.brown,
        ),
    ],
),

nepali calendar

EventCard

EventCard(
    event: 'Sports week Class 3 - Class 10',
    time: '1:00 - 3:00 PM',
    secondaryColor: SchoolToolkitColors.lighterGrey,
    primaryColor: SchoolToolkitColors.grey,
),

event card

RoutineCard

RoutineCard(
    classTopic: 'Fundamentals of Mathematics',
    classType: 'Theory Class',
    subject: 'Mathematics',
    professor: 'Mr. Ram Prasad Yadav',
    time: '8:00 - 9:00 AM',
),

routine card

DeadlineCard

 DeadlineCard(
    deadline: DateTime.now(),
    secondaryColor: ..., // optional
    primaryColor: ..., // optional
),

deadline card

AssignmentCard

AssignmentCard(
    // optional, if deadline is not passed, deadline card will not be shown
    deadline: DateTime.now(),
    question:
        'Chapter 3 - Q.no 1 - Q.no 10 (Please submit in word format with names attached)',
    subject: 'Mathematics',
    teacher: 'Dr. Stone',
    deadlineBackgroundColor: SchoolToolkitColors.red,
    onUploadHandler: () {
        print('Handle upload');
        // optional, if null is passsed upload button will be hidden
    },
    // optional
    fileList: [
        FileWrapper(
            fileName: 'assignment-information.pdf',
            fileSize: '11.5 KB',
            onTap: () {
            print('Handle on tap');
            },
        ),
    ],
),

assignment card

HighlightedIcon

HighlightedIcon(
    icon: Icons.class_,
    busy: true, // optional. If busy is set to true, displays a loading indicator instead of the icons passed.
),

highlighted icon

FeaturedVideoCard

FeaturedVideoCard(
    title: 'Professor KPR Lecture - Neuroscience Lecture 32',
    thumbnailURL:
        'https://www.teachermagazine.com.au/files/ce-image/cache/1c03ffc10fd4ef6a/Cognitive_load_theory_-_teaching_strategies_855_513_60.jpg',
    onTap: () {
        print('Handling on tap');
    },
),

featured video card

VideoListTileCard

VideoListTileCard(
    author: 'Dr. Richard',
    title: 'The science of gamma radiation.',
    margin: EdgeInsets.all(5.0),
    thumbnailURL:
        'https://www.teachermagazine.com.au/files/ce-image/cache/1c03ffc10fd4ef6a/Cognitive_load_theory_-_teaching_strategies_855_513_60.jpg',
    color: ..., // Optional. use to set the background color of the tile
    onTap: ..., // Optional. use to handle on tap
    padding: ..., // Optional. use to add desired padding
    showIcon: ..., // Optional. set this to flase if you don't want the icon besides the author.
),

video list tile card

ProfileCard

ProfileCard(
    imageURL:
        'https://cdn1.iconfinder.com/data/icons/female-avatars-vol-1/256/female-portrait-avatar-profile-woman-sexy-afro-2-512.png',
    email: '[email protected]',
    name: 'Dr. Steven Stones',
    phoneNumber: '9843XXXXXX',
    post: 'Sorceror',
    margin: EdgeInsets.all(5.0), // optional
),

profile card

BusRouteWidget

InformationTileWidget(
    margin: EdgeInsets.all(5.0),
    icon: FontAwesomeIcons.bus,
    biggerTitle: true,
    title: 'Bus Route 1',
    subTitle: 'Tinkune-Dhobhighat-NewRoad',
    iconColor: Colors.white,
    rounded: false,
    iconBackgroundColor: SchoolToolkitColors.blue,
    onTap: ..., // Optional.
),

bus route widget

NoticeCard

NoticeCard(
    date: DateFormat('yyyy-MM-dd').format(DateTime.now()),
    title: 'School Reopens',
    subTitile:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
    onTap: () {
        // Handle readmore
    },
),

notice card

LabelCard

LabelCard(
    label: 'Text label',
    color: SchoolToolkitColors.red,
    height: ..., // Optional
    width: ..., // Optional
    textStyle: ..., // Optional
),

label card

Support

Like what you see? Support me by buying me a coffee :)

Buy Me A Coffee

License

MIT License

You might also like...

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Jan 3, 2023

A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package for State management, routing and Dependency Injection (bindings). We

Jan 9, 2023

It's a Pharmacy application that help you in curing basic symptoms and diseases with medicines available in your home.

It's a Pharmacy application that help you in curing basic symptoms and diseases with medicines available in your home.

Medkit It's a Pharmacy application that help you in curing basic symptoms and diseases with medicines available in your home. How to Run Code Clone or

Oct 13, 2022

A Flutter plugin that provides assets abstraction management APIs without UI integration, you can get assets (image/video/audio) on Android, iOS and macOS.

A Flutter plugin that provides assets abstraction management APIs without UI integration, you can get assets (image/video/audio) on Android, iOS and macOS.

photo_manager Photo/Assets management APIs for Flutter without UI integration, you can get assets (image/video/audio) from Android, iOS and macOS. 提供相

Jan 4, 2023

This is a MVP our app's. The app get the song's list on firebase and display then you can be listen App features.

This is a MVP our app's. The app get the song's list on firebase and display then you can be listen App features.

music_app Requirements: flutter version 3.0.3 Dart 2.17.5 Firebase CLI 11.1.0 flutter sdk: = 2.15.1 3.0.0 flutter dependentcies: http: 0.13.4 mvvm:

Aug 2, 2022

This application was created using the Dart language and it is an application that contains a set of different questions and at the end shows you the number of correct answers you have answered , made by flutter

exams_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Dec 28, 2021

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

Jan 2, 2023
Comments
  • Cant use the Widgets!

    Cant use the Widgets!

    `import 'package:flutter/material.dart'; import 'package:school_ui_toolkit/school_ui_toolkit.dart';

    class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: ListView( children: [ ProfileCard( margin: EdgeInsets.all(8), email: 'email', name: "name", phoneNumber: "n/a", post: "post", imageURL: 'https://gepa-mbh.de/wp-content/uploads/2019/01/blank-profile-picture-973460.png', //Test Picture URL ), ], ), ); } }`

    Basically this gives the Error:

    The method 'setHeight' was called on null. Receiver: null Tried calling: setHeight(15)

    opened by phibr0 2
  • updated in /example and migrated to flutter_screenutil breaking changes

    updated in /example and migrated to flutter_screenutil breaking changes

    upgraded flutter_screenutil to ^3.2.0

    error message

    Because school_ui_toolkit 4.0.0 depends on flutter_screenutil ^2.2.0 
    and no versions of school_ui_toolkit match >4.0.0 <5.0.0,
    school_ui_toolkit ^4.0.0 requires flutter_screenutil ^2.2.0.
    
    So, because "App_Name" depends on both flutter_screenutil ^3.2.0 and school_ui_toolkit ^4.0.0,
    version solving failed.
    pub get failed (1; So, because "App_Name" depends on both flutter_screenutil ^3.2.0
    and school_ui_toolkit ^4.0.0, version solving failed.)
    exit code 1```
    opened by omaralmgerbie 1
  • Calendar Widget: Single Dots for Multiple events.

    Calendar Widget: Single Dots for Multiple events.

    Even for multiple events on a single date, the calendar still shows a single dot. Should be able to show multiple dots depending on the number of events on the date.

    enhancement 
    opened by Swaarup 1
  • fixed issue when using flutter_screenutil version higher than 3.0.0

    fixed issue when using flutter_screenutil version higher than 3.0.0

    upgraded flutter_screenutil to ^3.2.0

    error message

    Because school_ui_toolkit 4.0.0 depends on flutter_screenutil ^2.2.0 
    and no versions of school_ui_toolkit match >4.0.0 <5.0.0,
    school_ui_toolkit ^4.0.0 requires flutter_screenutil ^2.2.0.
    
    So, because "App_Name" depends on both flutter_screenutil ^3.2.0 and school_ui_toolkit ^4.0.0,
    version solving failed.
    pub get failed (1; So, because "App_Name" depends on both flutter_screenutil ^3.2.0
    and school_ui_toolkit ^4.0.0, version solving failed.)
    exit code 1```
    opened by omaralmgerbie 0
Owner
BugTheDebugger
The world of programming is while(1){ }
BugTheDebugger
A basic template of Flutter to get started. Includes various folders and packages that might be necessary.

Flutter App - Basic Template It's a time saving template with basic project structure, packages and other files like constants.dart to get started rat

Muhammad Hamza 47 Jun 12, 2022
This is template toolkit fasten your project setup within a minute. The toolkit is based on MVC+S structure.

BWeird Flutter Toolkit! Hi! From a Weirder Flutter has been great on mobile development and I took this opportunity to make it even greater with templ

Setak Varaman !!!! 6 Aug 22, 2021
This is a mason brick you can use to generate code that get's you started right up with a flutter project

flutter_brick This is a mason brick you can use to generate code that gets you started right up with a flutter project A flutter brick created with th

Bruce Omukoko 3 Sep 16, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
Simple Chat UI - This template is a simple chat ui build with flutter ui toolkit.

Simple Chat UI This template is a simple chat ui build with flutter ui toolkit. TODO dark mode support image support gif, video, ... web mode desktop

null 2 Apr 24, 2022
Simple & Beautiful Note-taking app written in dart with flutter UI toolkit.

Keep Notes is a privacy oriented, secure , beautiful and fast note (s) taking application made in flutter. It supports various features like adding an

null 26 Dec 30, 2022
An installation toolkit for Flutter SDK on Windows PCs

Flutter Installer An installation toolkit for Flutter SDK on Windows PCs ⚠ An updated version with changed requirements is in works. Click here to dow

Sampath Balivada 45 Nov 16, 2021
Habit formation is an Android & iOS app which is built using Flutter UI Toolkit.

Habit Formation Habit formation is an Android & iOS app which is built using Flutter UI Toolkit. You can create a habit through this app and can keep

Umang Kothari 11 Mar 6, 2022
CoVAC is an all-in-one Covid info toolkit app, providing users the facility to check for available slots along with receiving the latest updates related to the pandemic and the virus.

CoVAC - Covid 19 Vaccine Availability Checker Introduction ?? CoVAC is an android application developed to provide users the facility to check the ava

Aryan Kenchappagol 6 Dec 29, 2021
Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation with a minimum password strength required.

password_strength_checker Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation wit

Dario Varriale 6 Aug 8, 2023