fittor 1.0.6
fittor: ^1.0.6 copied to clipboard
A comprehensive Flutter package for creating responsive UIs that adapt to different screen sizes and orientations.
A comprehensive Flutter package for responsive UI design and network connectivity management.
Table of Contents #
Features #
- π± Responsive UI: Easily create responsive layouts that adapt to different screen sizes and orientations
- π¦ Custom Sized Box: Convenient extensions for creating SizedBox widgets
- π Internet Connectivity: Built-in connectivity monitoring with customizable no-internet UI
- π± Currency Converter: Live exchange rates and currency conversion utilities
- π¦ Package Management: Manage dependencies with ease
Installation #
dependencies:
fittor: ^latest_version
flutter pub add fittor
Then run:
flutter pub get
Usage #
Responsive #
Fittor provides a responsive design system through mixins and extensions. Here's how to use it:
Basic Setup
Add the FittorAppMixin
to your app:
class MyApp extends StatelessWidget with FittorAppMixin {
const MyApp({super.key});
@override
Widget responsive(BuildContext context) {
return MaterialApp(
title: 'Responsive Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
Using in Widgets
Access responsive values through context extensions:
Container(
width: context.wp(50), // 50% of screen width
height: context.hp(25), // 25% of screen height
padding: EdgeInsets.all(context.p16), // Adaptive padding
child: Text(
'Responsive Text',
style: TextStyle(fontSize: context.fs18), // Adaptive font size
),
)
Responsive Mixins
Use the FittorMixin
in your StatefulWidget:
class _MyWidgetState extends State<MyWidget> with FittorMixin {
@override
Widget build(BuildContext context) {
return Container(
width: wp(50), // 50% of screen width
padding: EdgeInsets.all(p16), // Predefined padding
child: Text(
'Hello World',
style: TextStyle(fontSize: fs(18)), // Responsive font size
),
);
}
}
Custom Sized Box #
Create SizedBox widgets with simple extensions:
// Width SizedBox
20.w // SizedBox with width 20
// Height SizedBox
16.h // SizedBox with height 16
// Square SizedBox
24.s // SizedBox with width and height both 24
Internet Connectivity #
Fittor includes built-in internet connectivity monitoring without any external packages.
Using ConnectivityWrapper
class MyApp extends StatelessWidget with FittorAppMixin {
const MyApp({super.key});
@override
Widget responsive(BuildContext context) {
return MaterialApp(
home: ConnectivityWrapper(
ignoreOfflineState: true,
onConnectivityChanged: (status) {
debugPrint('Connectivity status: $status');
},
child: const HomeScreen(),
),
);
}
}
Wrap your widget with ConnectivityWrapper
to automatically show a no-internet screen when connectivity is lost:
ConnectivityWrapper(
child: YourWidget(),
// Optional customizations:
offlineWidget: YourCustomOfflineWidget(),
onConnectivityChanged: (status) {
print('Connectivity status: $status');
},
)
The ignoreOfflineState
parameter (default: false) controls whether the wrapper automatically shows the no-internet screen:
ConnectivityWrapper(
ignoreOfflineState: true, // Don't show no-internet screen automatically
onConnectivityChanged: (status) {
// Handle connectivity changes yourself
},
child: YourWidget(),
)
When ignoreOfflineState
is set to true
, the ConnectivityWrapper will not automatically show the no-internet screen when connectivity is lost. Instead, it will continue showing your child widget and notify you of connectivity changes through the onConnectivityChanged
callback. This is useful when you want to handle connectivity UI yourself, such as showing snackbars or banners instead of full-screen notifications.
Using ConnectivityMixin
For more fine-grained control, use the ConnectivityMixin
in your StatefulWidget:
class _MyScreenState extends State<MyScreen> with ConnectivityMixin {
@override
void onConnectivityChanged(ConnectivityStatus status) {
if (status == ConnectivityStatus.online) {
// Handle online state
} else {
// Handle offline state
}
}
@override
Widget build(BuildContext context) {
// Access connectivity status with:
if (isOnline) {
return OnlineContent();
} else {
return OfflineContent();
}
}
}
Currency Converter #
Fittor provides a currency converter utility with live exchange rates.
Basic Conversion
double usdAmount = await context.convertCurrency(
from: 'INR',
to: 'USD',
amount: 100.0,
);
Convert and Format
String formatted = await context.convertAndFormat(
from: 'INR',
to: 'USD',
amount: 100.0,
);
Format with Custom Symbols
String formatted = context.formatCurrency(1234.56, 'USD');
Live Exchange Rates #
double rate = await context.getExchangeRate('INR', 'USD');
Extension #
Responsive Features #
Extension | Description | Example |
---|---|---|
num.w |
Creates SizedBox with width | 20.w creates SizedBox(width: 20) |
num.h |
Creates SizedBox with height | 16.h creates SizedBox(height: 16) |
num.s |
Creates square SizedBox | 24.s creates SizedBox.square(dimension: 24) |
context.wp(%) |
Percentage of screen width | context.wp(80) gives 80% of screen width |
context.hp(%) |
Percentage of screen height | context.hp(50) gives 50% of screen height |
context.p* |
Adaptive padding | context.p16 gives adaptive 16 padding |
context.fs* |
Adaptive font size | context.fs16 returns responsive font size 16 |
Connectivity Features #
Feature | Description | Example |
---|---|---|
ConnectivityWrapper |
Wraps UI with connectivity monitoring | ConnectivityWrapper(child: MyApp()) |
ConnectivityMixin |
Mixin for StatefulWidgets | class _MyState extends State<MyWidget> with ConnectivityMixin |
isOnline property |
Check online status with mixin | if (isOnline) { /* do network request */ } |
checkConnectivity() |
Manual connectivity check | await checkConnectivity() |
onConnectivityChanged |
Handle status changes | onConnectivityChanged(status) { /* handle change */ } |
Currency Features #
Feature | Description | Example |
---|---|---|
convertCurrency() |
Convert currency | double usdAmount = await context.convertCurrency(from: 'INR', to: 'USD', amount: 100.0); |
convertAndFormat() |
Convert and format | String formatted = await context.convertAndFormat(from: 'INR', to: 'USD', amount: 100.0); |
formatCurrency() |
Format currency | String formatted = context.formatCurrency(1234.56, 'USD'); |
getExchange Rate() |
Get exchange rate | double rate = await context.getExchangeRate('INR', 'USD'); |
π Troubleshooting #
- Ensure the package is correctly imported
- Check that you're using the latest version
- Verify flutter and dart SDK compatibility
- Check for any conflicts with other packages
π Contact & Support #
Author: Mushthak VP
π Connect With Me #
- Email: mail.musthak@gmail.com
- WhatsApp: +919061213930
- LinkedIn: Mushthak VP
- Instagram: @musth4k
- GitHub: mushthakvp
π‘ Collaboration #
Have a project or need custom Flutter development? Feel free to reach out! I'm always open to interesting projects, collaborations, and opportunities.
π€ Contributing #
Contributions are welcome! Whether you're reporting bugs, suggesting improvements, or want to collaborate, don't hesitate to connect.
License #
MIT - Copyright Β© 2025 Mushthak VP
π Support #
For any questions, issues, or custom development needs, please contact me directly via email or social media channels.