finovy / finovy_ui_kit

轻量、可靠的移动端Flutter组件库(A lightweight and reliable mobile Flutter component library))

Finovy UIKit

A lightweight and reliable mobile Flutter component library

English | 中文版

1. Usage

Add the following line to the dependencies section in the pubspec.yaml file:

fn_ui_kit:
  git:
    url: https://github.com/finovy/finovy_ui_kit.git

2. Basic Information of the Component Library

Name	fn_ui_kit
Category	UI
Development Framework	flutter
Development Language	Dart
Minimum Environment Requirement	flutter >=3.0.0 dart >=2.17.0 <=4.0.0
Current Version	1.1.0
Third-Party Dependencies	auto_size_text pin_code_fields pull_to _refesh visibility_detector
Open Source Repository	https://github.com/finovy/finovy_ui_kit.git

3. Component Library Directory Structure

fn_ui_kit
├── icons (svg universal icon: will not be compiled)
│ ├── base (most commonly used icon)
│ └── tabbar (bottom navigation bar icon)
├── lib (source code)
│ └── assets
│ ├── images (picture resources)
│ └── fn_icons.dart (general icon reference class type IconData)│
│ └── fn_icons_font.otf (font file generated by universal icons, referenced in pubspec.yaml file)
│ └── src
│ ├── basic (basic components, including Text, Button, Image, Icon, TextFiled, Public Page, and Tag)
│ └── charts (chart components, including LineChart, BarChart, etc.)
│ ├── constant (constant, including color, font size FontSize, and image path ImagePath)
│ └── feedback (feedback component, including pop-up confirmation box Dialog, light prompt box Toast, notification bar NoticeBar, and step bar Step)
│ ├── form (form component, including Cell, CheckBox, Form, RadioButton, Search component, Segment component, and Star Voting Rate)
│ ├── third_lib (third-party library)
│ └── business (business component, including verification code input box VerifyInput, event container Event Container, status placeholder component EmptyWidget, and date selection DatePicker)
│ ├── theme (theme component, including theme configuration of most components)
│ └── navigation (navigation component, including navigation bar AppBar, navigation return, grid component Grid, and scaffolding Scaffold)
├── pubspec.yaml (project configuration information)
└── README.md (English description document)
├── README_CN.md (Chinese description document)
└── CHANGELOG.md (modification record)

Directory Structure Explanation:

1. The icons directory is universal and will not be compiled when referenced;
2. The third_lib directory is for local dependencies of third-party libraries, ensuring the stability and iterative updates of the component library.
3. The pubspec.yaml file is the configuration file of the component library, which contains version information and related dependencies of the component library.
4. The CHANGELOG.md file must be filled in each time the component library is iteratively updated, recording the specific information of each iteration update of the component library.
5. The readme.md file is the description file when the component library is updated to other platforms such as GitHub, Pub, GitLab, etc.

Component Statistics in the Directory:

Directory Name	Component Category	Component Name	Component Description	Usage Scenarios
basic (Basic Class)	button	FNUIButton	button component, supporting primary button, secondary button, text button, icon button	can be used globally, supporting three states (available, disabled, loading), border customization, and text customization
	image	FNUIImage,	image components, supporting network and local images, and supporting specified module loading	Global Use
	input	FNUITextField, FNUIPasswordInput	Input components, supporting regular text input, keyboard style, text style, and other general settings Password input component, supporting regular password input, keyboard style, text style, and other general settings	Interactive input scenarios, validation scenarios
	text	FNUIText, FNExpandLabel	Text component, supporting normal text display and custom text style Foldable text component, supporting the folding and unfolding interaction of multiple lines of text	The most commonly used components are used globally Multiple lines of text are required to display the folding effect
	icon	FNUIIcon	Icon component, supports text and icon style customization	Global use, universal icons return IconData
form (Form class)	form	FNUIForm	Form component, supporting form display with regular input boxes, arrow style, and multi line text style	Personal information display or modification scenarios, feedback scenarios, etc.
	Cell	FNUICell	Form single line component, supporting display of titles, content, icons, etc.	User information display and data display scenarios
	radio	FNUIRadio	Radio button component, supporting unique radio control and display	Users can select a single data scene
	checkbox	FNUICheckBox	Check button component, supporting multiple selection control and display	Users selecting multiple data scenarios
	table	FNUITable	Table component, supporting regular header and content display	Data list display scenario with header
	rate	FNUIRate	Voting component, supporting icon displays such as voting and rating.	Voting and rating scenarios
	search	FNUISearch	Search component, supporting regular search view display	Scenarios that require search services
	segment	FNUISegment	Column component, supporting multiple sets of text for single selection	Scenarios that require selecting or switching between unique classifications
feedback (operation feedback class)	toast	FNUIToast	Light prompt component, supporting display of upper, middle, and lower positions, supporting mask interaction isolation	Interactive success, failure, and pop-up scenarios, loading waiting
	dialog	FNUIDialog	Popup box component, supporting pop-up confirmation boxes, bottom confirmation boxes, custom buttons, and event responses	Interactive confirmation scenarios, user active selection confirmation scenarios
	progress	FNUILinearProgress, FNUICircularProgress		Progress prompt component, supporting linear and circular visual effects
navigation (navigation class)	appbar	FNUIAppbar	Top navigation bar component, supporting general background, text, buttons, and other configurations	Global configuration, routing navigation page
	back	FNUINavBack	Navigation return button	Global configuration, routing navigation page
	grid	FNUIGrid	Grid component, supporting multiple menus	Global configuration
	scaffold	FNUIScaffold	Scaffold components	Global configuration
charts (chart class)	-	-	-	Packaging not yet completed
business (Business)	verifycode	FNUISerifyCodeInput	The verification code input component supports over 90% of verification code scenarios and can be highly customized.	Used for login, registration, and other verification code input scenarios
	place_ Holder	FNUIEmpty	The placeholder view component supports multi category displays such as no data, request errors, network errors, etc.	Used for view placeholder scenarios, and can be selected according to actual needs
	picker	FNUIDataPicker	Time selection component, supporting multiple styles of time selection	for selecting specific times, supporting regular time formatting
	event	FNUIEventContainer	Event ordinary container component, inheriting ordinary containers, supporting click events	Scenarios that require containers to bring click events
constant (constant class)	colors	FNColors	Color constant class, categorizing color values for different scenes on the design draft, supporting quick access	For unified color values, used in conjunction with themes
	fonts	FNFontSize	Font size constant class, unified font size	used to unify font size within a project, generally without additional specifications
	images	FNImagePath	Image path processing class, providing image path storage and processing	Used to define image class addresses in component libraries
theme (Theme Configuration Class)	styles	Component Theme Configuration Folder	Contains most component theme configurations	Used for individual theme configurations for each component
	theme	FNTheme	Theme Configuration Main File	Main File Entry Reference
third_ Lib (Third Party Dependency Class)	auto_ Size_ Text	-	Text automatic size component, supporting adaptive text font size based on width	For special text font size adaptation display scenarios
	pin_ Code_ Fields	-	Verification code input component, supporting verification code input, automatic filling, etc.	Used for login, registration, and other verification code input scenarios
	pull_ To_ Refresh	-	List refresh component, supports customization of the header and bottom	for list component refresh scenarios
	visibility_ Detector	-	Visible area detection component, supporting visible state detection of views	Used for route switching, page switching, front and back switching scene detection
context (Context class)	context	FNDesignContext	Context configuration entry, mainly used to provide context for pop-up classes; Two initialization methods are provided: initFNUIKitContext, FNUIKitContextBuilder	Program main entry for initialization