This is the first time on this blog am sharing with you an Educational app, well I don’t know if the name is correct but this app is kinda like Udemy.

Get the source code for free: https://github.com/cybdom/educational_app

Leave a 3$ tip right here: https://www.buymeacoffee.com/bi3cp0Zk5

Home Screen:

Logo:

The original design didn’t include a logo and it felt a little bit empty, so I decided to add a Text widget inside of a black rounded Container and call it a logo.

Horizontal category list:

final List<Map<String, dynamic>> categories = [ { 'color': Color(0xff333333), 'name': 'All', }, { 'color': Color(0xffee59a2), 'name': 'Flutter', }, { 'color': Color(0xffefd139), 'name': 'Marketing', }, { 'color': Color(0xff28f3c1), 'name': 'Wordpress', }, { 'color': Color(0xff03a9f4), 'name': 'Design', }, ];

So what we have here is a list of categories, each category has a name and a color. Once we have this list we can use a ListView.builder to build our Categories items.

Container( // This is the Horizontal menu - It could be a separate widget, but it's not. margin: EdgeInsets.only(top: 15.0), height: 39, child: ListView.builder( itemCount: categories.length, scrollDirection: Axis.horizontal, itemBuilder: (ctx, i) { return ConstrainedBox( constraints: BoxConstraints(minWidth: 90), child: Container( alignment: Alignment.center, margin: EdgeInsets.symmetric(horizontal: 9.0), padding: EdgeInsets.symmetric(horizontal: 15.0), decoration: BoxDecoration( color: categories[i]['color'], borderRadius: BorderRadius.circular(35.0), ), child: Text( "${categories[i]['name']}", style: Theme.of(context) .textTheme .subtitle .apply(color: Colors.white), ), ), ); }, ), ),

Course Container:

Here we’ve got the course banner image, along with the profile picture of the author (I shouldn’t be an egg-shaped image, but I forgot to set the height and width parameters – sorry).

This layout was arranged using a Stack, where the banner image is inside a Positioned Container that leaves 25 units of space at the bottom. While the profile picture is also inside a Container that gives it a shadow and it’s positioned exactly on the bottom of the Stack but still leaves some space on the right.

Below the banner image container, we have some more information about the course, this information is mostly text widgets and they are arranged inside a column.

Details Screen:

This second screen is again a Stack, which has two parts, one is the bottom button and the second is everything else.

Other than that, we have the same Banner container, the same course information, I just added here a description.

Another thing about this screen is that it takes a parameter of type integer. We use it in order to get the right course information such as the background color, the category, description, etc.

THE END…

If you like this kind of articles, or you are just interested in the source code, I recommend that you add this site to your favorites list and that you follow me on Twitter as well as on my Github as there is a lot of content coming soon.

Coming soon: