Flutter Challenge | The Medium App | Flutter App Development

At the very top, the article has a text which gives you relevance as to why it’s there. For example, if it’s based on your reading history or if it’s from a category you follow.

Below that is the title of the article itself, which is bold and black as to stand out.

Below the title is the author of the article, date of publishing, and how long the article is estimated to take to read.

On the right hand side is the article image and a bookmark button for saving it for later.

Setting up the app

Create a new Flutter, example: “medium_app_ui”.

Remove the code for the counter app until you only remain with a Scaffold with an AppBar.

[php]
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Home’,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() =&gt; new _MyHomePageState();

}

class _MyHomePageState extends State&lt;MyHomePage&gt; {

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Home"),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: &lt;Widget&gt;[
],
),
),
);
}
}
[/php]

This is the app with a simple app bar.

Before we move on to the list, let’s construct the AppBar according to the Medium design.

As of now, the appBar is blue. We need to change the app bar to black. The actions on the appBar are notifications and search. Doing these changes:

[php]
appBar: &lt;strong class="markup–strong markup–pre-strong"&gt;new &lt;/strong&gt;AppBar(
title: &lt;strong class="markup–strong markup–pre-strong"&gt;new &lt;/strong&gt;Text(&lt;strong class="markup–strong markup–pre-strong"&gt;"Home"&lt;/strong&gt;),
backgroundColor: Colors.&lt;em class="markup–em markup–pre-em"&gt;black&lt;/em&gt;,
actions: &lt;Widget&gt;[
Icon(Icons.&lt;em class="markup–em markup–pre-em"&gt;notifications_none&lt;/em&gt;, color: Colors.&lt;em class="markup–em markup–pre-em"&gt;grey&lt;/em&gt;,),
Icon(Icons.&lt;em class="markup–em markup–pre-em"&gt;search&lt;/em&gt;, color: Colors.&lt;em class="markup–em markup–pre-em"&gt;grey&lt;/em&gt;),
],
),&lt;/pre&gt;
[/php]

After this, we need to adjust a few icons and add a drawer. To add a drawer without any content, simply add

[php]
</pre><pre name="877c" class="graf graf–pre graf-after–p">drawer: Drawer(),
[/php]

to your Scaffold.

Here is the code and resulting AppBar.

[php]
import ‘package:flutter/material.dart’;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Home’,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Home", style: TextStyle(fontWeight: FontWeight.w400),),
backgroundColor: Colors.black,
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Icon(Icons.notifications_none, color: Colors.grey,),
),
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: Icon(Icons.search, color: Colors.grey),
),
],
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
),
drawer: Drawer(),
);
}
}
[/php]

[php]</pre>
<pre id="13bc" name="13bc" class="graf graf–pre graf-after–p">class NewsArticle {

String categoryTitle;
String title;
String author;
String date;
String readTime;
String imageAssetName;

NewsArticle(this.categoryTitle, this.title, this.author, this.date,this.readTime, this.imageAssetName);

}</pre>
<pre name="13bc" class="graf graf–pre graf-after–p">[/php]

For now, they’re just hardcoded articles.

Creating the List

To create a repeating list in Flutter, we use ListView.builder().

In the image, the cards are over a grey background.

Let’s analyse the card components themselves.

There’s a class named NewsHelper which provides the hard-coded articles.

The final item is build like this:

[php]
<pre id="f7fc" name="f7fc" class="graf graf–pre graf-after–p">Padding(
padding: const EdgeInsets.fromLTRB(0.0,0.5,0.0,0.5),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(article.categoryTitle, style: TextStyle(color: Colors.black38,fontWeight: FontWeight.w500, fontSize: 16.0),),
Padding(
padding: const EdgeInsets.fromLTRB(0.0,12.0,0.0,12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(child: Text(article.title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),), flex: 3,),
Flexible(
flex: 1,
child: Container(
height: 80.0,
width: 80.0,
child: Image.asset("assets/" + article.imageAssetName, fit: BoxFit.cover,)
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(article.author, style: TextStyle(fontSize: 18.0),),
Text(article.date + " . " + article.readTime, style: TextStyle(color: Colors.black45, fontWeight: FontWeight.w500),)
],
),
Icon(Icons.bookmark_border),
],
)
],
),
),
),
);</pre>
[/php]

Designing the Drawer

This is how the drawer looks on the Medium app:

The Drawer is simply a Column with a list of elements and an Image at the top. The top white portion can be represented by one container and the bottom half by another.

Here is the drawer in code:

[php]
<pre id="671f" name="671f" class="graf graf–pre graf-after–p">Drawer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(32.0,64.0,32.0,16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(Icons.account_circle, size: 90.0,),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("John Doe", style: TextStyle(fontSize: 20.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("See profile", style: TextStyle(color: Colors.black45),),
)
],
),
),
),
Expanded(
child: Container(
color: Colors.black12,
child: Padding(
padding: const EdgeInsets.fromLTRB(40.0,16.0,40.0,40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Home", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Audio", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Bookmarks", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Interests", style: TextStyle(fontSize: 18.0),),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Become a member", style: TextStyle(fontSize: 18.0, color: Colors.teal),),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("New Story", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Stats", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Drafts", style: TextStyle(fontSize: 18.0),),
),
],
),
),
),
),
],
),
),</pre>
[/php]

Here is the final code of the page:

[php]

import ‘package:flutter/material.dart’;
import ‘package:medium_app_ui/NewsArticle.dart’;
import ‘package:medium_app_ui/NewsHelper.dart’;

void main() => runApp(new MyApp());

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Home", style: TextStyle(fontWeight: FontWeight.w400),),
backgroundColor: Colors.black,
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 24.0),
child: Icon(Icons.notifications_none, color: Colors.grey,),
),
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: Icon(Icons.search, color: Colors.grey),
),
],
),
body: ListView.builder(
itemBuilder: (context, position) {

NewsArticle article = NewsHelper.getArticle(position);

return Padding(
padding: const EdgeInsets.fromLTRB(0.0,0.5,0.0,0.5),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(article.categoryTitle, style: TextStyle(color: Colors.black38,fontWeight: FontWeight.w500, fontSize: 16.0),),
Padding(
padding: const EdgeInsets.fromLTRB(0.0,12.0,0.0,12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(child: Text(article.title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),), flex: 3,),
Flexible(
flex: 1,
child: Container(
height: 80.0,
width: 80.0,
child: Image.asset("assets/" + article.imageAssetName, fit: BoxFit.cover,)
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(article.author, style: TextStyle(fontSize: 18.0),),
Text(article.date + " . " + article.readTime, style: TextStyle(color: Colors.black45, fontWeight: FontWeight.w500),)
],
),
Icon(Icons.bookmark_border),
],
)
],
),
),
),
);
},
itemCount: NewsHelper.articleCount,
),
drawer: Drawer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(32.0,64.0,32.0,16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(Icons.account_circle, size: 90.0,),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("John Doe", style: TextStyle(fontSize: 20.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("See profile", style: TextStyle(color: Colors.black45),),
)
],
),
),
),
Expanded(
child: Container(
color: Colors.black12,
child: Padding(
padding: const EdgeInsets.fromLTRB(40.0,16.0,40.0,40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Home", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Audio", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Bookmarks", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Interests", style: TextStyle(fontSize: 18.0),),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Become a member", style: TextStyle(fontSize: 18.0, color: Colors.teal),),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("New Story", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Stats", style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Drafts", style: TextStyle(fontSize: 18.0),),
),
],
),
),
),
),
],
),
),
);
}
}

[/php]

That’s it for today. Feel free to suggest any other apps you may want to see recreated in Flutter.

Project GitHub link : https://github.com/deven98/MediumAppFlutter

Setting up the app

Creating the List

Designing the Drawer

Leave a Comment

Uncategorized

Mastering the Digital Arena: Small Business Growth Strategies

Android, Culture, Cultures, Entertainment, Flutter News, iPhone, Lifestyle, Politics, Science, Sporting, Sports, Standard Post, Tech, Technology, Travel, Travelling, Uncategorized, Video

Flutter Commons Package

Android, iPhone

A Flutter widget to use Echarts in a reactive way

Android, iPhone, Standard Post

A bottom tool bar that can be swiped left or right to expose more tools

Android, iPhone, Standard Post

A time tracking app build using Flutter

Android, iPhone

A flutter plugin for music playback including notification handling

Flutter Challenge: The Medium App

Setting up the app

Creating the List

Designing the Drawer

Leave a Comment

most recent

Uncategorized

Mastering the Digital Arena: Small Business Growth Strategies

Android, Culture, Cultures, Entertainment, Flutter News, iPhone, Lifestyle, Politics, Science, Sporting, Sports, Standard Post, Tech, Technology, Travel, Travelling, Uncategorized, Video

Flutter Commons Package

Android, iPhone

A Flutter widget to use Echarts in a reactive way

Android, iPhone, Standard Post

A bottom tool bar that can be swiped left or right to expose more tools

Android, iPhone, Standard Post

A time tracking app build using Flutter

Android, iPhone

A flutter plugin for music playback including notification handling