Develop a full fledged Global News Flutter App in a day PART 1.
Published in
3 min readSep 3, 2020
Today we are going to develop a full fledged production ready news app from scratch. This app is created using a News API which is used to fetch all the news articles based on different categories Keywords.
Let’s create the Homescreen for the part 1.
WorkFlow:
- A custom appbar is created i.e CustomAppBar class.
- List of news categories like sports,finance is created with images and names.
- HomeScreen class is created for the Homescreen below the appbar.
- fetchnews() function is defined where all the top headlines are fetched using the API key generated from the API url.
fetchnews() async {
var response = await http.get('https://newsapi.org/v2/top-headlines?country=in&apiKey=5bdee0d2641c4e6092827ab728d8b9d3'); setState(() {
var converted = json.decode(response.body);
data = converted['articles'];
isloading = false;
});
}
- Now language translation feature is initialized using translator package.
void convert(String title, String description, String lan) { translator.translate(description, to: lan).then((s) =>
{
setState(() {
translateddes = s;
ischanged = true;
})
});
translator.translate(title, to: lan).then((s) =>
{
setState(() {
translatedtit = s;
ischanged = true;
})
});
}- newscard widget is defined now which contains an image,description and 3 buttons for viewing full news article,translation and sharing the news.
- Notifications feature is also setup on this page but we will be discussing it in the later parts.
- The most important part of this homescreen page is Swiper widget which have different pages and arrows to navigate through different news articles.
Swiper(
itemBuilder: (BuildContext context, int index) { return newscard(index);
},
onIndexChanged: (index)
{
setState(() {
ischanged = false;
ishindi = false;
isenglish = false;
});
},
indicatorLayout: PageIndicatorLayout.COLOR, autoplay: false,
itemCount: data.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
),Let’s code for this workflow:
And that’s how the homescreen got created.
