fuk_ui_kit

Description:

fuk ui kit

fuk_ui_kit #
A Flutter package for building efficient and elegant user interfaces.
Installation #
Add fuk_ui_kit to your pubspec.yaml file:
dependencies:
fuk_ui_kit: ^0.0.6
copied to clipboard
Usage #
Import #
Import the package in your Dart file:
import 'package:fuk_ui_kit/fuk_ui_kit.dart';
copied to clipboard
FukHeader #
The FukHeader component allows you to add a customizable header to your application.
FukHeader(
title: 'Dashboard',
leading: const Icon(Icons.menu),
actions: [
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {
// Handle settings button press
},
),
],
)
copied to clipboard
FukContent #
The FukContent component is used to display the main content of the page.
FukContent(
child: Center(
child: Text('This is the content area.'),
),
)
copied to clipboard
FukButton #
The FukButton component allows you to create stylish buttons.
FukButton(
text: 'Show Info Notification',
onPressed: () {
// Handle button press
},
)
copied to clipboard
FukFooter #
The FukFooter component adds a footer to your application.
FukFooter(
text: 'Footer Content',
)
copied to clipboard
FukNotify #
The FukNotify component allows you to display toast-style notifications.
FukNotify.show(
context,
type: FukNotifyType.info,
direction: FukNotifyDirection.top,
message: 'This is an info notification.',
)
copied to clipboard
FukContentMaster #
The FukContentMaster component manages the main layout of the application, including the sidebar and the main content.
FukContentMaster(
topItems: [
SideBarItems(
title: 'Buttons',
routeName: 'buttons',
leading: const Icon(Icons.smart_button),
onTap: () {},
),
// Other items...
],
content: FukContent(
child: Center(
child: Column(
children: [
FukButton(
text: 'Show Info Notification',
onPressed: () {
// Handle button press
},
),
// Other buttons...
],
),
),
),
footer: const FukFooter(child: Text('Footer Content')),
aside: Container(
color: Colors.grey[800],
child: const Center(
child: Text('Aside Content'),
),
),
)
copied to clipboard
FukModal #
The FukModal component is used to display modal dialogs in your application.
// Show the modal
showDialog(
context: context,
builder: (BuildContext context) {
return FukModal(
title: 'Modal Title',
content: Text('This is the modal content.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(); // Close the modal
},
child: Text('Close'),
),
ElevatedButton(
onPressed: () {
// Handle action
},
child: Text('Save'),
),
],
);
},
);
copied to clipboard
FukDataGrid #
The FukDataGrid component is used to display data in a grid format.
FukDataGrid(
columns: const [
DataColumn(label: Text('ID')),
DataColumn(label: Text('Name')),
DataColumn(label: Text('Age')),
],
rows: const [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Alice')),
DataCell(Text('23')),
]),
DataRow(cells: [
DataCell(Text('2')),
DataCell(Text('Bob')),
DataCell(Text('34')),
]),
DataRow(cells: [
DataCell(Text('3')),
DataCell(Text('Charlie')),
DataCell(Text('29')),
]),
],
)
copied to clipboard
FukTextFile #
The FukTextFile component allows you to select files or folders with specific configurations.
const FukTextFile(
isRequired: true,
allowedFileTypes: [AllowedFileType.folder],
icon: Icon(Icons.folder),
label: 'Select a Folder',
decoration: InputDecoration(
border: OutlineInputBorder(),
),
)
copied to clipboard
FukTextField #
The FukTextField component allows you to create text fields with customizable labels and placeholders.
const FukTextField(
label: 'Name',
placeholder: 'Enter your name',
isRequired: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
)
copied to clipboard
Examples #
For more usage examples, check out the example code in the example directory.