Flextrix Example App demonstrates how to create adaptive and responsive UIs effortlessly using the Flextrix package. It automatically adjusts UI elements based on screen size, making your app look great on mobile, tablet, and desktop 📱💻.
✅ Automatic Layout Adaptation – No need for manual screen size checks.
✅ Adaptive Widgets & Styling – Adjusts padding, font sizes, and container sizes dynamically.
✅ Easy Integration – Just wrap your app and start using context.adaptive().
✅ Works on Any Screen Size – Mobile, Tablet, and Desktop support.
✅ Lightweight & Efficient – No extra dependencies, just pure Flutter goodness!
Add Flextrix to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
flextrix: latest_version # Replace with the latest versionRun the following command:
flutter pub getimport 'package:flextrix/flextrix.dart';Modify your main.dart to wrap the app for automatic responsiveness:
void main() {
runApp(FlextrixExampleApp().addFlextrix()); // Wraps app with responsive layout
}class ResponsiveHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flextrix Example")),
body: Center(
child: Padding(
padding: EdgeInsets.all(
context.adaptive(8.0, 32.0, sm: 16.0, md: 24.0), // Adaptive padding
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Displays Current Screen Type
Text(
"Current Screen: ${_getScreenType(context)}",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
// Adaptive Box
Container(
width: context.adaptive(100.0, 300.0, sm: 200.0),
height: 100,
color: Colors.blue,
child: Center(
child: Text(
"Adaptive Box",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(height: 20),
// Adaptive Font Size
Text(
"Adaptive Font Size",
style: TextStyle(
fontSize: context.adaptive(14.0, 24.0, sm: 18.0, md: 20.0),
),
),
],
),
),
),
);
}
/// Determines the current screen type
String _getScreenType(BuildContext context) {
if (context.isMobile) return "Mobile";
if (context.isTablet) return "Tablet";
return "Desktop";
}
}context.adaptive() automatically adjusts UI properties based on screen size.
This allows dynamic UI scaling without manually checking screen widths.
context.adaptive(
10.0, // Mobile (xs)
40.0, // Desktop (lg)
sm: 20.0, // Small tablets (sm)
md: 30.0 // Large tablets (md)
);| Device Type | Value Used |
|---|---|
| Extra Small (xs) - Mobile | 10.0 |
| Small (sm) - Small Tablet | 20.0 |
| Medium (md) - Large Tablet | 30.0 |
| Large (lg) - Desktop | 40.0 |
padding: EdgeInsets.all(
context.adaptive(8.0, 32.0, sm: 16.0, md: 24.0),
),✔️ Mobile: 8.0
✔️ Tablet: 16.0 or 24.0
✔️ Desktop: 32.0
width: context.adaptive(100.0, 300.0, sm: 200.0),✔️ Mobile: 100.0
✔️ Small Tablet: 200.0
✔️ Desktop: 300.0
style: TextStyle(
fontSize: context.adaptive(14.0, 24.0, sm: 18.0, md: 20.0),
),✔️ Mobile: 14.0
✔️ Small Tablet: 18.0
✔️ Large Tablet: 20.0
✔️ Desktop: 24.0
if (context.isMobile) {
print("This is a mobile device");
} else if (context.isTablet) {
print("This is a tablet");
} else {
print("This is a desktop");
}✔️ Helps in adjusting layouts dynamically.
📖 Flutter Documentation: flutter.dev
📦 Flextrix on Pub.dev: pub.dev/packages/flextrix
Chinmay Nagar – Flutter Developer & Tech Enthusiast
🔗 Portfolio: chinmaynagar-dev.web.app
💼 LinkedIn: chinmay-nagar-55786424b
📧 Email: nagar.chinmay.7@gmail.com
Now your Flutter app is fully responsive using Flextrix! 🚀
Drop a ⭐ if you like this package! ❤️