Responsive Flutter UI using VelocityX

4 min readNov 24, 2020

What is Responsive UI?

In Simple Words, Responsive UI works with any kind of devices i.e. Tablets, Mobiles & Desktops and orientation. As shown Above, Same UI works well in Portrait as well as Landscape mode on Mobile. Please see below how this is achieved easily with the help of VelocityX.

What is VelocityX?

VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development easier and more joyful than ever.

Let’s begin to create a Flutter UI …

Step1

First of all, Add dependency in your pubspec.yaml file and then once done please install it by clicking on “packages get” option on android studio or you can run $ flutter pub get command via command line.

dependencies:
  velocity_x: ^1.0.0

Further to this, You will have to import this file in your dart code.

import 'package:velocity_x/velocity_x.dart';

Now as our preparations are all done. it’s time to convert our design to Flutter UI.

Step 2

In title screenshot, as you can see, all the elements in page are vertically align hence we can directly use column and arrange them vertically. Instead, My approach is little different as I would like to make it responsive and hence would like to reuse same widget again. So I will go for Stack widget.

first element in our scaffold is Stack.

Inside Stack, Let’s focus on Image widget.

body: Stack(
  children: [
    Image.network("https://image.freepik.com/free-photo/beautiful-asian-woman-carrying-colorful-bags-shopping-online-with-mobile-phone_8087-3877.jpg",
   ),

Here comes the fun part. Via Traditional way, I would be spending time setting up Height and width for Landscape and Portrait mode using MediaQuery. Using VelocityX, this job is very easy. See Below:

height: context.isLandscape?context.screenHeight:context.screenHeight*0.5,
width: context.isLandscape?context.percentWidth*50:context.screenWidth,
fit: BoxFit.cover,

complete code for image widget

Image.network("https://img.freepik.com/free-photo/beautiful-asian-woman-carrying-colorful-bags-shopping-online-with-mobile-phone_8087-3877.jpg?size=626&ext=jpg",
height: context.isLandscape?context.screenHeight:context.percentHeight*50,
width: context.isLandscape?context.percentWidth*50:context.screenWidth,fit: BoxFit.cover,),

Step 3

Now, It’s time to add text to our App. Hence I have created separate widget: TextContainer

class TextContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        "20 % Discount".text.xl4.semiBold.make(),
        20.heightBox,
        "All New Arrivals".text.xl4.semiBold.make(),
        20.heightBox,
        "Shop the latest women's, men's and children's fashion plus homeware, beauty and more. Next day delivery and free returns available. Shop now!".text.xl.semiBold.make(),
        30.heightBox,
        VxBox(
          child: Icon(Icons.arrow_forward_ios,color: Colors.white,size: 30,)
        ).black.p16.roundedSM.make()



      ],
    );
  }
}

As you can see above, I have used some of the VelocityX widgets and it’s properties. Let’s go through above code in more detail below.

text widget

"Get 20% discount".text.xl4.semiBold.make(),
"All New Arrivals".text.xl4.semiBold.make(),
"Shop the latest women's, men's and children's fashion plus homeware, beauty and more. Next day delivery and free returns available. Shop now!".text.xl.semiBold.make(),

In Velocityx you can use any string and convert it to a text widget by adding .text property and end with .make(). there are several inbuild properties to the text widget you can check it here

2.heightBox

20.heightBox,
//SizedBox(height:20)

The heightBox widget is similar as SizedBox with height property, if you want width then you can use widthBox which is similar to SizedBox widget with width property.

3.VxBox()

VxBox(
  child: Icon(Icons.arrow_forward_ios,color: Colors.white,size: 30,)
        ).black.p16.roundedSM.make()

In above example, VxBox().make is similar to Container widget. It is very powerful widget which will have some amazing properties.You can check it here

.black  // for giving background colour black
.p16 // giving 16 pixel padding from all side.
.roundedSM  // giving  small radius to container corner.

To position the TextContainer widget I have just given different padding for landscape and portrait mode. using context.isLandscape?.pOnly widget use for padding . it has four property pOnly(top ,left ,right ,bottom,)

TextContainer().pOnly(top: context.isLandscape?context.percentHeight*10:context.percentHeight*55,
          left:context.isLandscape?context.percentHeight*98:context.percentHeight*2 ),

Complete code for this Tutorial Below:

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:HomePage()
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.network("https://img.freepik.com/free-photo/beautiful-asian-woman-carrying-colorful-bags-shopping-online-with-mobile-phone_8087-3877.jpg?size=626&ext=jpg",
          height: context.isLandscape?context.screenHeight:context.percentHeight*50,
          width: context.isLandscape?context.percentWidth*50:context.screenWidth,fit: BoxFit.cover,),
          TextContainer().pOnly(top: context.isLandscape?context.percentHeight*10:context.percentHeight*55,
          left:context.isLandscape?context.percentHeight*98:context.percentHeight*2 ),
        ],
      ),
    );
  }
}
class TextContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        "20 % Discount".text.xl4.semiBold.make(),
        20.heightBox,
        "All New Arrivals".text.xl4.semiBold.make(),
        20.heightBox,
        "Shop the latest women's, men's and children's fashion plus homeware, beauty and more. Next day delivery and free returns available. Shop now!".text.xl.semiBold.make(),
        30.heightBox,
        VxBox(
          child: Icon(Icons.arrow_forward_ios,color: Colors.white,size: 30,)
        ).black.p16.roundedSM.make()
      ],
    );
  }
}

you can find the same code on Github

I hope you have like my article on VelocityX. Please try this and let me know how it goes (More are on the way)!

Thank you,

Responsive Flutter UI using VelocityX

Written by Renuka Kelkar