Responsive Flutter Widgets Simplified with VelocityX

Narendra Jangid

17 January 2025

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 :-

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/

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 :-

flutter pub get

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 : –

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(),
      ]),
    );
  }
}

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),

))

.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),

))

.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 :

Velocity_x

Thanks for reading this blog ❤️