Responsive UI in flutter with example…

In this article, we will see about what is responsive ui and how to create the responsive ui in flutter. let’s go.

What is Responsive UI:

responsive means when you resize the screen according the width the ui has to change, it means for example we have two widget one is image and other one is text.

Column(Image,Text), this column has two rows when you minimizing the screen then is should be Row(Image,Text) and the widgets are coming one after another and vice versa.

How to create Responsive UI:

This is very simple, for this we use LayoutBuilder widget, let’s see how to use this.

child: LayoutBuilder(

builder: (BuildContext context, BoxConstraints constraints) {

if(constraints.maxWidth <786) {

return MobileWidget( );

}

else {

return TabWidget( );

}

}

),

The layoutbuilder comes with the BoxConstrains, by using this argument we can get the width of the screen, if screen size is less than 786 it means mobile then it will show like above Mobile image or Tab Image.

Thanks for reading, if you like my article please applaud.