Responsive Flutter UI using VelocityX

What is Responsive UI?

Responsive UI is the approach that suggests that mobile design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

I am developing responsive websites for last 15 years. In web development there are certain rules, CSS frameworks, which helps to make websites responsive very easily. There are always lot of questions in my mind when I keep thinking about Responsive Mobile App development.

Q1. Where should be my starting point?

Q2. Do I need to use MediaQuery / LayoutBuilder /Expanded and Flexible widgets or all together ?

Q3. Do I need to use different size of images?

Q4. How do I test my App? Do I need actual devices to test it?

These questions go on and on … & …. ofcourse there is lot of confusion around it….:-)

To start developing responsive app, I usually follow these steps to get there.

Step 1: To test your app on different device size using Device Preview Package.

Device preview package:

Using this package, you can test your app inside your Android emulator with different device size. It is very handy and useful. To use this package follow below steps.

1. Add this to your package’s pubspec.yaml file:

2. Install it by running pug get or Flutter pub get.

3.Import the file into Dart code.

4. Wrap your MyApp with devicePreview in main.dart file.

void main() {
  runApp(DevicePreview(builder: (Context)=>MyApp(),
    enabled: !kReleaseMode,
  )
  );
}

5. Add locale in your MaterialApp

locale: DevicePreview.locale(context), // Add the locale here
builder: DevicePreview.appBuilder, 

Above code is very important. If you forget to put above code then your MediaQuery changes can’t see in your output. You can check all the information for this **here.**

To make app responsive, I am using VelocityX.

In VelocityX, you will get all the options together.

for to use VelocityX you need to Add dependency to in your pubspec.yaml file:

You can install packages from the command line:

with Flutter:

Now you can import in your dart code

Using BuildContext

It is mainly use for to check Orientation / Device Type/Device Size /Responsive column /

BuildContext for MediaQuery extensions

It is use for to access Screen Height & Width / Percentage Height & width

and VelocityX offers two main widgets for responsiveness —

VxDevice (Mobile/Web)

Using this widget you can specify two widgets for Mobile and Web but it must not be null. There are limited option for this widget.

VxResponsive (All Devices)

In this tutorial I am mainly using combination of Vx Responsive and BuildContext. Using this widget you can create different layout or design for different device size.it will give more control on sizing.

important : fallback must not be Null. If you want know more about VelocityX then please check **Here**

In this Travel App, I have created three separate widgets for

Image Container:

class ImageContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network("https://image.freepik.com/free-vector/travel-tourism-illustration-with-resort-sightseeing-elements_1284-30189.jpg",
      width: context.percentWidth*100,fit: BoxFit.cover,
    );
  }
}

In above code, I have used build context to check whether the device is Mobile or not and then specified different percentage for height and width.

Category widget:

class Category extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: context.isMobile ? 50 : 90,
        child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: cities.length,
            itemBuilder: (context,index){
              return VxBox(
                  child: cities[index].countryName.text.size(context.isMobile?15:40).semiBold.white.makeCentered()
              ).size(context.isMobile?context.percentWidth*25:context.percentWidth*30, context.percentHeight*10).red600.roundedSM.make().p4();
            })
    );
  }
}

In above code, I have again checked if the device is mobile then gave separate height & width and text size.

City widget:

class City extends StatefulWidget {
  @override
  _CityState createState() => _CityState();
}

class _CityState extends State<City> {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: cities.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: context.isMobile?2:3),
        itemBuilder: (context,index){

          return Stack(
            children: [
              ClipRRect(
                  borderRadius: BorderRadius.circular(15),
                  child: Image.network(cities[index].cityImage,
                    height:context.isMobile? context.percentHeight*30:context.percentHeight*50,
                    width: context.percentWidth*50,
                    fit: BoxFit.cover,)),
              Align(
                alignment: Alignment.bottomCenter,
                child: VxBox(
                    child: cities[index].cityName.text.semiBold.black.size(context.isMobile?20:40).bold.makeCentered()
                ).height(context.isMobile?30:70).color(Colors.white.withOpacity(0.5)).roundedSM.alignBottomCenter.make(),
              ),

            ],
          ).p4();

        });
  }
}

In above code, I am checking if device is Mobile then specifed separate crosscount for grideview, percentage height/width, text size with padding .

Now it’s time to setup the VxResponsive widget:

VxResponsive(
          xsmall: Column(
            children: [
              ImageContainer(),
              Category(),
              City(),
            ],
          ).scrollVertical(),
          small: Column(
            children: [
              ImageContainer(),
              Category(),
              City(),
            ],
          ).scrollVertical(),
          medium: Column(
            children: [
              ImageContainer(),
              Category(),
              City(),
            ],
          ).scrollVertical(),
          large: Column(
            children: [
              ImageContainer(),
              40.heightBox,
              Category(),
              City(),
            ],
          ).scrollVertical(),
          xlarge: Column(
            children: [
              ImageContainer(),
              Category(),
              City(),
            ],
          ).scrollVertical(),
          fallback: Column(
            children: [
              ImageContainer(),
              Category(),
              City(),
            ],
          ).scrollVertical(),
        )
    );
  }
}

In above code, I am using the same widget

Column(
         children: [
          ImageContainer(),
          Category(),
           City(),
      ],
)

Here you can customise each device view layout using VxResponsive.

As you can see above, I am writing these articles in a very descriptive, simple way so that any beginner will get what they are looking for. if you still have any further questions, do feel free to follow me on Twitter:@TechpowerGirls1

you can check full code of this Travel App on my

GitHub

Video Link

Renuka kelkar

Freelance Flutter Developer

Founder of TechPowerGirls