fittor 1.0.6 copy "fittor: ^1.0.6" to clipboard
fittor: ^1.0.6 copied to clipboard

A comprehensive Flutter package for creating responsive UIs that adapt to different screen sizes and orientations.

Fittor Logo

pub package pub points License: MIT GitHub issues GitHub stars

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 #

πŸ’‘ 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.

9
likes
0
points
5
downloads

Publisher

verified publishermushthak.com

Weekly Downloads

A comprehensive Flutter package for creating responsive UIs that adapt to different screen sizes and orientations.

Repository (GitHub)
View/report issues

Topics

#responsive #connectivity #ui-design #layout #adaptive

Funding

Consider supporting this project:

github.com

License

unknown (license)

Dependencies

flutter

More

Packages that depend on fittor