In order to display the images vertically,
First of all create a folder named assets in your project and add 4 images in it as shown here.
Flutter uses the pubsec.yaml file, located at the root of your project, to identify assets required by an app. Therefor after adding these images in assets folder,we need to edit pubspec.yaml and add these lines to it
Now, lets start coding:)
Open up your main.dart file and add these lines.
Now we need to edit the MyHomePage class .Since we need to display the images vertically ,we are going to use Column() widget which will allow us to render the images vertically.
Here I have used Scaffold() widget to basically have a appbar for my app and Card() widget to give elevation to the images to be displayed.The images in the assets folder can be displayed using Image.asset(“filepath”).
But the problem with this is -you will observe that the bottom overflows as shown here.
In order to fix this we wrap the entire Column() widget within SingleChildScrollView() widget .This widget is useful when you have a single box that will normally be entirely visible,but you need to make sure it can be scrolled if the container gets too small in one axis (the scroll direction).This will solve the issue of overflowing.
Here we can also notice that the spacing between the 2 images is very less.To increase the spacing we can use Padding() widget as shown below.
And finally we can see our images which are being displayed vertically and are scrollable.
This is the final video.
This is the final code.
This tutorial is also available on youtube.
If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.❤
