In this blog we will learn Responsive Flutter Widgets Simplified with VelocityX
VelocityX is inspired by the Tailwind CSS framework, and its syntax promotes a declarative style for UI development, making the codebase clean and easy to understand. With features like customizable widgets, powerful extensions, and animations, VelocityX empowers developers to create stunning Flutter applications effortlessly.
Key Features of VelocityX
Widget Extensions :
Add modifiers like .rounded, .p16, .shadow, and more to existing widgets for seamless customization.
Layout Utilities :
Provides utilities like VStack, HStack, and ZStack for building vertical, horizontal, and layered layouts with ease.
Styling Simplification :
Offers easy methods to apply colors, paddings, margins, and shadows without nesting multiple widgets.
Responsive Design :
Ensures layouts adapt beautifully to different screen sizes using utilities like VxResponsive.
Button Styling :
ElevatedButton`: Creates a button with a label styled using .text.make() , .p16(): Adds padding around the button.
Card Creation :
App displays a card with title, description, and a button, all styled with VelocityX.
Implementation :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
name: velocity_x description: use of velocity_x plugin. publish_to: 'none' environment: sdk: '>=3.0.1 <4.0.0' dependencies: flutter: sdk: flutter velocity_x: dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/ |
This pubspec.yaml file defines a Flutter project named velocity_x, demonstrating the use of the velocity_x package. It specifies Flutter SDK versions between 3.0.1 and 4.0.0 and includes dependencies like velocity_x and flutter_test for testing. Additionally, it enables Material Design and references an assets directory.
Run The Command To Install All Dependency :-
|
1 |
flutter pub get |
The flutter pub get command is used in Flutter to retrieve all the dependencies listed in the pubspec.yaml file for a project.
Use Code In Your Project : –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import 'dart:math'; import 'package:flutter/material.dart'; import 'package:velocity_x/velocity_x.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: HomePage(), ); } } class HomePage extends StatefulWidget { @override State createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { final List<String> _categories = List.generate(12, (index) => "Category $index"); int _visibleCount = 6; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: "E-Shop".text.xl3.bold.make(), ), body: VStack([ // Featured Products "Featured Products".text.xl.bold.make().p16(), VxSwiper.builder( itemCount: 5, height: 200, viewportFraction: 0.8, autoPlay: true, itemBuilder: (context, index) { return VxBox() .p12 .margin(EdgeInsets.all(6)) .color(Color.fromARGB( 255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), )) .roundedSM .shadow .bgImage(const DecorationImage( image: NetworkImage( 'https://via.placeholder.com/150', // Replace with a valid image URL ), fit: BoxFit.cover, )) .make(); }, ).py16(), // Categories Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ "Categories".text.xl.bold.make().p8(), ElevatedButton( onPressed: () { setState(() { _visibleCount = _visibleCount < _categories.length ? _categories.length : 6; }); }, child: (_visibleCount < _categories.length ? "Show More" : "Show Less").text.make(), ), ], ).p8(), // GridView for Categories GridView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: _visibleCount, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 3 / 2, ), itemBuilder: (context, index) { return VxBox( child: _categories[index].text.align(TextAlign.center).makeCentered(), ) .roundedSM .color(Color.fromARGB( 255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), )) .p16 .shadow .make(); }, ).p16(), ]).scrollVertical(), bottomNavigationBar: VxBox( child: HStack( [ Icon(Icons.home, size: 34), Icon(Icons.shopping_cart, size: 34), Icon(Icons.person, size: 34), ], alignment: MainAxisAlignment.spaceEvenly, ).p4(), ).color(Vx.gray200).make(), ); } } class ProductDetailsPage extends StatelessWidget { final String productName; ProductDetailsPage(this.productName); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: productName.text.xl.bold.make(), ), body: VStack([ VxSwiper.builder( itemCount: 3, height: 300, autoPlay: true, itemBuilder: (context, index) { return VxBox() .bgImage(DecorationImage( image: AssetImage('assets/product_$index.jpg'), fit: BoxFit.cover, )) .make(); }, ).py16(), "Description".text.xl.bold.make().p16(), "This is a fantastic product with many features!".text.make().p16(), 10.heightBox, ElevatedButton( onPressed: () { VxToast.show(context, msg: "Added to Cart!"); }, child: "Add to Cart".text.make(), ).p16(), ]), ); } } |
The code leverages VelocityX, a Flutter framework, to streamline UI design and styling. It simplifies layouts with widgets like VxBox and VStack, while offering concise methods for text styling and spacing. Features like VxSwiper enable animated carousels with ease. Additionally, utilities like VxToast enhance user interactions efficiently.
Output :-
VelocityX
Conclusion:
VelocityX is a fantastic tool for developers who want to build UIs quickly and efficiently without diving into repetitive code. While it may not replace the need for native Flutter widgets entirely, it is an excellent companion for most Flutter projects. If you’re looking to speed up your development process while maintaining clean code, VelocityX is worth exploring.
Hope you enjoyed this article. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development
Other blogs you may like…
Dart Macros: Metaprogramming with Code Generation
How To Use InAppWebView In Flutter
Utilizing Flutter Gen to Enhance Flutter Development
Integrating Gemini with Flutter
Reference :
Thanks for reading this blog ❤️
Be the first to comment.