Full-screen image and horizontal listview — Flutter UI
We’re going to design a simple Flutter UI app that’ll look exactly like the below screenshots. If you want to jump into the source code, the link is at the end of the article.
The concept of the app is to present some of the most visited areas in a country. We’re gonna display a full-screen image that represents the country and a list of places people may want to visit in that country.
** Create a new Flutter app project and remove all the existing code. Just keep a blank screen.
Creating mock data
Create 2 classes. Country and Destiny.
Country: The country class has attributes such as id (unique country id), name, imageURL, attraction (no. of attraction count), isMyFavourite (whether you’ve marked is country as your favorite or not)
Destiny: The destiny class represents the destiny (areas || places) in a country. countryID (unique country id), destiny (name of the place), imageURL, illustration (illustration of the place — you can ignore this). Destiny can be filtered based on the countryID.
I’ve added some mock data here.
Making full-screen image
Create a StatefulWidget named CountryPage with 2 required constructors [country, destinies].
Set this CountryPage as your MyApp’s MaterialApp.home.
// Get a country from the country list
final Country country = countryList[0];// Get all the destinies in the country filtered by the countryID
final List<Destiny> destinies = destinyList.where((element) => element.countryID == country.id).toList()MaterialApp(
...
home: CountryPage(countryList[0], destinies)
...
)
Come back to the CountryPage and add the following code inside the Stack() widget.
Stack(
fit: StackFit.expand,
children: [
Image.network(widget.country.imageURL,fit: BoxFit.cover),
],
)If you run the app now, you should be able to see a full screen.
Let’s make the status bar transparent, so that we can see the whole image properly.
Add the following code inside the build method of the MyApp widget.
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);Custom AppBar
Add the following code under the Image widget as children of the stack widget in the CountryPage widget.
The code is reponsible to make the following appbar and their corresponding controls.
Country name widget
Create a new StatelessWidget named CountryNameDisplayWidget.
After creating the CountryNameDisplayWidget, add the following code under the appbar code.
Align(
alignment: Alignment.bottomLeft,
child: Container(
margin: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CountryNameDisplayWidget(widget.country),
],
),
),
),Destiny horizontal list
Listview item widget
Create another StatelessWidget named CountryDestinyWidget.
Creating listview
Add the following children of the Column under the CountryNameDisplayWidget we’ve added above.
We’re creating a horizontal listview of height 120 pixel. Each item in the listview has 120 pixel height and 150 pixel width. Each listview item is a CountryNameDisplayWidget, which consist of an image and a Text widget that displayes the place name.
Column(
children:[
...
const SizedBox(height: 16.0),
SizedBox(
height: 120,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: widget.destinies.length,
itemBuilder: (context, index) {
final Widget destiny = SizedBox(
width: 150.0,
height: 120.0,
child: CountryDestinyWidget(widget.destinies[index]),
);
if (index < widget.destinies.length - 1) {
return Row(
children: [
destiny,
const SizedBox(width: 16.0),
],
);
}
return destiny;
},
),
),
...
],
)If you run the app, the botom of page will look something like the below screenshot.
The last piece
The final piece of the app is the “more” button at the bottom of the app. Add the following code as the last child of the column widget.
Container(
margin: const EdgeInsets.symmetric(vertical: 20.0),
child: Column(
children: const [
Icon(
Icons.keyboard_arrow_up_rounded,
color: Colors.white,
),
Text(
'More',
style: TextStyle(
color: Colors.white,
),
)
],
),
)That’s it. Run the app and check it out.
If you find it useful give a clap or a star on the GitHub repo. :-)
Source code: GitHub.
