Smiley_ui: Implementation of BastiUi design in Flutter

Last update: May 3, 2022

smiley_ui

GitHub stars GitHub license Coverage Status

Implementation of BastiUi design in Flutter. (Inspired by Aloïs Deniel implementation)

Try the demo

Getting started

For now this package is not available on pub.dev so, you can add the package by adding the following to your pubspec.yaml:

smiley_ui:
  git:
    url: https://github.com/TesteurManiak/bastiui_smileys.git
    ref: main # Optional, use it if you want a specific branch or tag.

Documentation

SmileyWidget

Base widget which draws an animated smiley.

Code Sample

SmileyWidget(
    expression: SmileyExpression.happy,
);

Screenshot

SmileyWidget

Supported Parameters

  • expression: The expression of the smiley.
  • isSelected: Selection state of the smiley.
  • isEnabled: Define if the widget is enabled or not. (Manage the opacity on the widget)
  • onTap: Callback when the widget is tapped on.

SmileysSelection

Widget which displays a list of smileys and allows selection.

Code Sample

SmileysSelection();

Screenshot

SmileysSelection

Supported Parameters

  • expressions: List of smiley expressions to display.
  • onSmileySelected: Callback triggered when the user selects or unselect a smiley.

SmileyBottomSheet

Widget to use as the content of a bottom sheet.

This widget will display the SmileysSelection widget alongside a title and a submit button which will be disabled while the user did not select a smiley.

Code Sample

SmileyBottomSheet();

// Or use
showSmileysBottomSheet(context);

Screenshot

SmileyBottomSheet

Supported Parameters

  • title: Title of the bottom sheet.
  • submitButtonText: Text that will be used for the submit button.
  • submitButtonStyle: ButtonStyle used for the submit button.

SmileysDialog

Dialog which contains the SmileysSelection widget.

Code Sample

SmileysDialog();

// Or use
showSmileysDialog(context);

Screenshot

SmileysDialog

Supported Parameters

  • title: Title of the dialog.
  • submitButtonText: Text of the submit button.
  • cancelButtonText: Text of the cancel button.
  • submitButtonStyle: Style of the submit button.
  • cancelButtonStyle: Style of the cancel button.

Credits

GitHub

https://github.com/TesteurManiak/bastiui_smileys
You might also like...

A Flutter App for Design+Courses Courses Website

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

Nov 6, 2021

Cross Platform Login UI design using Flutter.

Cross Platform Login UI design using Flutter.

Flutter Login UI It's a #SpeedCode tutorial for Flutter #Login #UI project with splash screen and multiple color support.

Jun 13, 2022

Aris fltruniverse - Minimal UI Design in Flutter

Aris fltruniverse - Minimal UI Design in Flutter

Flutter Universe Minimal UI Design in Flutter Tutorial 👇🏼👇🏼👇🏼 Flutter Desi

May 14, 2022

HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

flutter_colorpicker HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps. Adorable color pickers out o

Jun 18, 2022

An UI Design as an example to make a flutter project

An UI Design as an example to make a flutter project

Hello Guys! in this project i taked an UI Design as an example to make a flutter project. this project is the first part for figma to flutter...

Jun 25, 2022

A simple UI design with Login, Sign up and Home screens

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

Apr 7, 2022

A simple UI design of the Origin Games Homepage.

A simple UI design of the Origin Games Homepage.

Origin Home UI A simple UI design of the Origin Games Homepage. I didn't have internet data 😥 to do what I was doing so I decided to have some fun 😉

Nov 1, 2021

A conceptual design for on boarding screens for mobile apps.

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

Jun 21, 2022

UI Design of the next Messenger 💬 App ✍️

 UI Design of the next Messenger 💬 App ✍️

UI Design of the next Messenger 💬 App ✍️

Jun 22, 2022

Related

I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Jan 22, 2022
The Flutter implementation of Iconly icon sets.
The Flutter implementation of Iconly icon sets.

Flutter package for using Iconly Icons. Iconly is totally free, and you can use this package to bring these awesome icons to your Flutter project.

Jun 10, 2022
Implementation of the adwaita theme for flutter/dart

Implementation of the adwaita color scheme found in libadwaita. Inspired by the yaru theme for flutter. Usage import 'package:flutter/material.dart';

May 24, 2022
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

Jun 7, 2022
A Flutter project that gives basic flutter design to implement a login UI
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

Apr 23, 2022
Canton Design System elements and resources for flutter.

Canton Design System Canton Design System elements and resources for Flutter. Description This package contains elements that I use in my apps. It inc

Feb 12, 2022
This is an eCommerce minimalist template with a clean and beautiful design for Flutter.
This is an eCommerce minimalist template with a clean and beautiful design for Flutter.

Shope - Free Flutter eCommerce Template The “Shope” e-Commerce UI Kit has the goal to help you to save time with the frontend development. You can use

Jun 21, 2022
Flutter Beautiful Login Page design and Animation - day 12
Flutter Beautiful Login Page  design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Jun 14, 2022
Create mobile game store design using Flutter
Create mobile game store design using Flutter

Create mobile game store design using Flutter

Jun 2, 2022
Create mobile marketplace design using Flutter
Create mobile marketplace design using Flutter

On this Marketplace Design has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price, rating, total view, and description of the product with the Buy Now button.

Jun 17, 2022