As an introduction, I’d like to say that this month was incredible. More followers, more clients, more visitors, and other things …

And I’d like to thank everyone who contributed to making it such a great month. That said I encourage you to follow me on Twitter, more interesting content is coming!

After such an emotional introduction let’s get right into the interesting stuff.

As always head to the Github repo and get the app source code. Note that you can freely use this source code for your future app. (Stop asking permission and go build something great!)

Global.dart: Defining most of our variables:

In the global file, I stored the game categories, game info, and colors. In a real-world app, you would get the data from an API (Tell me if you want a tutorial about that), however, since we are here just for the UI I’ve chosen to use static data.

Something very important: The font family

I noticed that changing the font family changes the whole design, to prove that remove the “fontFamily” attribute in the “main.dart” file.

In order to apply different fonts to your flutter app follow these simple steps:

Find the font you like best and download it from Google Fonts (Could be anywhere else). Place the font files in an assets folder inside your flutter project. Head to your Pubspec.yaml and add your fonts files there, for example

fonts: - family: Montserrat fonts: - asset: assets/fonts/Montserrat-Regular.ttf - asset: assets/fonts/Montserrat-bold.ttf weight: 700 - asset: assets/fonts/Montserrat-light.ttf weight: 100

Now you can use the font anywhere or everywhere in your app.

If you want to change the whole app font family set it in your material app theme. Otherwise, you can set it in individual TextStyles.

return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'QuickSand', ), home: HomeScreen(), );

Widgets:

Game container:

The main widget here is a ClipRRect, it is used to give our image a rounded corner effect. You can use it this way:

ClipRRect( borderRadius: BorderRadius.circular(15.0), child: Container() ),

In our case we don’t use a Container, we use a Stack!

When you want to put widgets on top of others Stack is here to help. Take a look:

Stack( children: <Widget>[ Positioned.fill( child: Image.Network(URL) ) Positioned( bottom: 0, right: 0, left: 0, child: Container(SOME_TEXT_WIDGET), ) ] ),

Putting Text straight on top of random images isn’t always a good idea, because you don’t know if the contrast will be good enough and sometimes your image will have the same color as your text and the later will be invisible!

In order to avoid that we put our Text inside a container, and we give our container slightly transparent background color.

In my case this is what I did:

Container( padding: EdgeInsets.all(9.0), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.black26, Colors.black], ), ), child: OTHER_WIDGETS )

Horizontal scrolling menu:

If you are following my blog you should be familiar with this type of menu. But let me explain the new folks:

First things first, Create a Container with a fixed height (VERY IMPORTANT) then give it a child of ListView.Builder (ListView also works).

Set the itemCount to the length of your “Categories list” (could be anything else).

Make the itemBuilder return the “Category name” (Again could be any other widget).

In our case we have a Column, the first child is a Text Widget and the second is a Container that serves as an Indicator.

To register the tap on this column we wrap it with a GestureDetector just like this:

GestureDetector( onTap: () { setState(() { active = id; }); }, child: OUR_CLICKABLE_WIDGET ),

Then our Text and “Indicator” widget checks if it’s id = active and if so the first becomes bold and the second becomes visible.

Pages/Screens: (I don’t know what is the naming convention and I always struggle with this 0_o)

Home:

Just like most of the layouts out there the first child of the Scaffold here is a Column, on top we have a blue container acting like it’s an AppBar, with the usually welcome message, CircleAvatar image, search field, and our lovely menu.

Below, we Expanded a StaggeredGridView.countBuilder! This time I’ve chosen to use a package from the community (CHECK IT HERE).

I wanted to have the “Pinterest” effect so instead of wasting time trying to reinvent the wheel I followed these simple steps:

Google: Pinterest layout flutter Google: Staggered Layout flutter Google: flutter_staggered_grid_view Added flutter_staggered_grid_view to Pubspec.yaml Copy past the example code and VOILA!

Easy peasy lemon squeezy! CSGO

Details:

This tutorialish article is becoming too long, will talk about it later … Or never?

Who knows!

Only those who follow @cybdom on Twitter know!

If you got here consider contributing by buying me a coffee? Every cup counts. https://www.buymeacoffee.com/bi3cp0Zk5