Forem: Kunal Jain

Nested Scroll View Flutter

Kunal Jain — Sat, 22 Aug 2020 03:15:12 +0000

Hello guys, this blog post is a part of a video series we are started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:-

In this blog post, we will create the body of the homepage using Nested Scroll View.

Now in the project, We will create a new folder named screens/home in which create a homepage.dart a file.

Now let's create a StateFull Widget named HomePage().

HomePage() would return a NestedScrollView().

Now we replace the Container() in body of Home() from HomePage():-

In NestedScrollView, there is a parameter, headerSliverBuilder:-

headerSliverBuilder: (context, value) {
        return [
        ];
      },

In return of headerSliverBuilder, we will pass the Sliver App Bar:-

SliverToBoxAdapter(
           child: Padding(
              padding: const EdgeInsets.fromLTRB(25, 10, 25, 25),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Top News Updates",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: "Times",
                    fontSize: 34,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ),

Now we will create categories list. For that, we will create a folder named as model in which we create categories.dart as a file.
Now we will create a class named CategoryModel.In which we pass use variable name and imageUrl and we will create the constructor of the class.

class CategoryModel{
  final name,imageUrl;
  CategoryModel({this.name, this.imageUrl});
}

Then we will create the list of CategoryModel.

List<CategoryModel> categories = [
  CategoryModel(name: "Top stories", imageUrl: "assets/images/categories/topnews.jpg"),
  CategoryModel(name: "India", imageUrl: "assets/images/categories/india.jpg"),
  CategoryModel(name: "World", imageUrl: "assets/images/categories/world.jpg"),
  CategoryModel(name: "Business", imageUrl: "assets/images/categories/business.jpg"),
  CategoryModel(name: "Sports", imageUrl: "assets/images/categories/sports.jpg"),
  CategoryModel(name: "Cricket", imageUrl: "assets/images/categories/cricket.jpg"),
  CategoryModel(name: "Tech", imageUrl: "assets/images/categories/tech.jpg"),
  CategoryModel(name: "Education", imageUrl: "assets/images/categories/education.jpg"),
  CategoryModel(name: "Entertainment", imageUrl: "assets/images/categories/entertainment.jpg"),
  CategoryModel(name: "Music", imageUrl: "assets/images/categories/music.jpg"),
  CategoryModel(name: "Lifestyle", imageUrl: "assets/images/categories/lifestyle.jpg"),
  CategoryModel(name: "Health and Fitness", imageUrl: "assets/images/categories/health_fitness.jpg"),
  CategoryModel(name: "Fashion", imageUrl: "assets/images/categories/fashion_trends.jpg"),
  CategoryModel(name: "Art and Culture", imageUrl: "assets/images/categories/art_culture.jpg"),
  CategoryModel(name: "Travel", imageUrl: "assets/images/categories/travel.jpg"),
  CategoryModel(name: "Books", imageUrl: "assets/images/categories/books.jpg"),
  CategoryModel(name: "Real Estate", imageUrl: "assets/images/categories/realestate.jpg"),
  CategoryModel(name: "Its Viral", imageUrl: "assets/images/categories/its_viral.jpg"),
];

Now go back to homepage.dart.In return of headerSliverBuilder, we will create our TabBar.

Now for TabBar And Nested Scroll View, we will create the controller and integer:-

ScrollController _scrollController;
TabController _tabController;
int currentIndex = 0;

Now we will create the functions named as changePage and _smoothScrollToTop:-

void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

_smoothScrollToTop() {
    _scrollController.animateTo(
      0,
      duration: Duration(microseconds: 300),
      curve: Curves.ease,
    );
  }

Now we will create initState of HomePage()

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController = ScrollController();
    _tabController = TabController(length: categories.length, vsync: this);
    _tabController.addListener(_smoothScrollToTop);
 }

In TabController, there is parameter vsync where we use this. Now for this, we have to use SingleTickerProviderStateMixin Here:-

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {

Now we will create the dispose of HomePage()

@override
  void dispose() {
    super.dispose();
    _tabController.dispose();
    _scrollController.dispose();
  }

In TabBar, there is a parameter tabs in which we will pass the List.generate and give the list of CategoryModel as created above.

SliverToBoxAdapter(
            child: Container(
              padding: EdgeInsets.only(left: 25),
              alignment: Alignment.centerLeft,
              child: TabBar(
                  labelPadding: EdgeInsets.only(right: 15),
                  indicatorSize: TabBarIndicatorSize.label,
                  controller: _tabController,
                  isScrollable: true,
                  indicator: UnderlineTabIndicator(),
                  labelColor: Colors.black,
                  labelStyle: TextStyle(
                      fontFamily: "Avenir",
                      fontSize: 19,
                      fontWeight: FontWeight.bold),
                  unselectedLabelColor: Colors.black45,
                  unselectedLabelStyle: TextStyle(
                      fontFamily: "Avenir",
                      fontSize: 18,
                      fontWeight: FontWeight.normal),
                  tabs: List.generate(categories.length,
                      (index) => Text(categories[index].name))),
            ),
          ),

Now in NestedScrollView, there is a parameter body.

But before that, we will create a new folder in lib as reusable in which we will create a new file named custom_cards.dart.

Now in custom_card.dart, we will create a Stateless Widget named HomePageCard.This will be our Reusable Widget.

class HomePageCard extends StatelessWidget {
  final imageUrl, title, subtitle, time;

  const HomePageCard(
      {Key key,
      this.imageUrl = "assets/cardimage.jpg",
      this.title =
          "Watch: Gameplay for the first 13 games optimised for Xbox Series X",
      this.time = "07 May  07:19",
      this.subtitle =
          "Microsoft showcased 13 games, with their gameplay trailers, that will come to Xbox Series X with optimisations."})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 203,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
                color: Color(0xff707070),
                width: 1,
              ),
              image: DecorationImage(
                  image: AssetImage(imageUrl), fit: BoxFit.fill),
            ),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(11),
                      color: Colors.black.withOpacity(0.33),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                    child: Center(
                      child: Text(
                        subtitle,
                        style: TextStyle(
                            fontFamily: "Avenir",
                            fontSize: 16,
                            color: Colors.white),
                        maxLines: 3,
                        overflow: TextOverflow.fade,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(time,
              style: TextStyle(
                  fontFamily: "Times", fontSize: 13, color: Color(0xff8a8989))),
          SizedBox(
            height: 7,
          ),
          Text(title,
              style: TextStyle(
                  fontFamily: "League",
                  fontSize: 23,
                  fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

Now in the body of NestedScrollView, we will pass List.generate in which we will return the ListView.builder in which we will return HomePageCard and itemCount will be static.

body: Container(
          child: TabBarView(controller: _tabController,children: List.generate(categories.length, (index) {
            return ListView.builder(itemCount: 10,itemBuilder: (context, index) {
              return HomePageCard();
            },
            padding: EdgeInsets.symmetric(horizontal: 25),
            );
          })),
        )

Now last see the final output:-

Github Source Code Link:-

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Branch: Part--3--NestedScrollView

Flutter XML Data Parsing

Kunal Jain — Fri, 14 Aug 2020 06:19:04 +0000

Hello guys, this blog post is a part of a Flutter Video Series we are started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:-

In this blog, we are going to implement the backend of our homepage.

We are going to use XML data and convert into formatted JSON objects to make it easier to use in our app.

What is an RSS Feed?

RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format.

Accessing an RSS Feed directly into our app is not quite possible.
So, we will parse the RSS/XML data into JSON and display it into the UI portion of our application.

For that, we are going to use the package named xml2json: An XML to JSON conversion package.
https://pub.dev/packages/xml2json.

xml2json

This package allows the parsing of XML strings and the transformation of the resulting parse tree into the following XML JSON conventions:-

The package uses the XML parser to perform the parsing of XML data into a parse tree.

Parker
Badgerfish
Google Data(GData).

The Parker convention is a lossy but lean conversion from XML into JSON, ideal for lightweight XML parsing, where attributes and namespace information is not needed.

Badgerfish and GData both preserve XML information such as attributes and namespaces. These are more suited to heavyweight XML parsing of say RSS feeds where this information may be needed.

Now let's see what our single item in the RSS feed looks like:

As we can see here (line:17) the url is an attribute, hence we need to use either BadgerFish or GData.

In this tutorial, we will be using the GData XML Parser

Add this to your package's pubspec.yaml file:

dependencies:
  xml2json: ^4.3.0

Let's create a new file for handling the parsing process:
rss_to_json.dart

Lets first import the necessary libraries.

convert: To convert a String into a List/Map
xml2json
http: For getting the XML data from the web

import 'dart:convert';
import 'package:xml2json/xml2json.dart';
import 'package:http/http.dart' as http;

Now create a function rssToJson.

Future<List> rssToJson (String category,
    {String baseUrl = "https://www.hindustantimes.com/rss/"}) async{
  var client = new http.Client();
  final myTransformer = Xml2Json();
  return await client.get(baseUrl + category + "/rssfeed.xml").then((response) {
    return response.body;
  }).then((bodyString) {
    myTransformer.parse(bodyString);
    var json = myTransformer.toGData();
    return jsonDecode(json)['rss']['channel']['item'];
  });
}

Here the jsonDecode function is used because the XML parser returns a String. So we just converted the String into a List.

Using `rssToJson` in our homepage

Now there are two ways to fetch Json data:

FutureBuilder()
Future.wait()

We will use Future.wait() in this tutorial.

Future.wait()

Future.wait() waits for multiple futures to complete and collects their results.

Returns a future which will complete once all the provided futures have completed, either with their results or with an error if any of the provided futures fail.

The value of the returned future will be a list of all the values that were produced in the order that the futures are provided by iterating futures.

We will create a Map named as newsData.

Future getData() async {
    return Future.wait([
      rssToJson('topnews'),
      rssToJson('india'),
      rssToJson('world'),
      rssToJson('business'),
      rssToJson('sports'),
      rssToJson('cricket'),
      rssToJson('tech-features'),
      rssToJson('education'),
      rssToJson('entertainment'),
      rssToJson('music'),
      rssToJson('lifestyle'),
      rssToJson('health-fitness'),
      rssToJson('fashion-trends'),
      rssToJson('art-culture'),
      rssToJson('travel'),
      rssToJson('books'),
      rssToJson('realestate'),
      rssToJson('its-viral'),
    ]).then((value){
       newsData['topnews'] = value[0];
    newsData['india'] = value[1];
    newsData['world'] = value[2];
    newsData['business'] = value[3];
    newsData['sports'] = value[4];
    newsData['cricket'] = value[5];
    newsData['tech'] = value[6];
    newsData['education'] = value[7];
    newsData['entertainment'] = value[8];
    newsData['music'] = value[9];
    newsData['lifestyle'] = value[10];
    newsData['health-fitness'] = value[11];
    newsData['fashion-trends'] = value[12];
    newsData['art-culture'] = value[13];
    newsData['travel'] = value[14];
    newsData['books'] = value[15];
    newsData['realestate'] = value[16];
    newsData['its-viral'] = value[17];
       setState(() {
        isLoading = false;
      });
    });
  }

Here value containers all the results as a List.

Now we will call the initState() in the Home() Class and call the getData function.

@override
void initState() {
  super.initState();
  getData();
  }

Now we are getting the XML Data to JSON but we want this data in the homepage.dart. So we will declare the Map<String, List> named newsData in HomePage() and then we will pass it to its constructor

class HomePage extends StatefulWidget {
  final Map<String, List> newsData;

  const HomePage({Key key, this.newsData}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

Now we need to set the data into HomePageCard (our reusable Widget).

TabBarView(
  controller: _tabController,
  children: List.generate(
    categories.length,
    (index) {
      var key = categories[index]
        .imageUrl
        .toString()
        .split("/")[3]
        .split(".")[0]
        .replaceAll("_", "-");
      return ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 25),
        itemBuilder: (context, i) {
          String time = _newsData[key][i]['pubDate']['__cdata'];
          DateTime timeIST = DateTime.parse(time.split(" ")[3] +
            "-" +
            getMonthNumberFromName(month: time.split(" ")[2]) +
            "-" +
            time.split(" ")[1] +
            " " +
            time.split(" ")[4]);
          timeIST = timeIST
            .add(Duration(hours: 5))
            .add(Duration(minutes: 30));
          return HomePageCard(
            title: _newsData[key][i]['title']['__cdata'],
            description: _newsData[key][i]['description']['__cdata'],
            date: timeIST.day.toString() +
                " " +
                getMonthInWordsFromNumber(month: timeIST.month) +
                " " +
                timeIST.toString().split(" ")[1].substring(0, 5),
                imageUrl: _newsData[key][i]['media\$content']['url'],
            );
        },
        itemCount: _newsData[key]?.length ?? 0,
      );
    },
)),

So our backend part is finished So we get the final output.

Github Source Code Link:-

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Branch: Part--4--XmlToJson

Intregation of tensorflow Lite with Flutter

Kunal Jain — Fri, 03 Apr 2020 10:49:26 +0000

Hello guys, today I am going to show you how we can integrate tensorflow in Flutter.
Before I would like to go deep into video, if you are interested in more flutter content like this then consider subscribing.to Code Decoders

TensorFlow offers multiple levels of abstraction so you can choose the right one for your needs.
If one need more flexibility, eager execution allows for immediate iteration and intuitive debugging for large ML training tasks
TensorFlow has always provided a direct path to production.
TensorFlow lets you train and deploy your model easily, no matter what language or platform you use.
Google has provided Teachable Machine which is a web-based tool that makes creating machine learning models fast, easy, and accessible to everyone.

There are supporting the training of three types of models:
1.Image Project
2.Audio Project
3.Pose

How can I train a model with Teachable Machine?
Well, it’s pretty simple, all you need to have is an idea about what you want your application have to do.
After this, you have to gather the data.
Then train the models.
When the training was done, I am able to export the model within minutes.
So, now comes the next part which is using this model in the Flutter app. There is no official TensorFlow Lite package made by Google yet but there is one available which is well maintained. I used this package tflite in my project.

Firstly you will see the console of the teachable machine.

We have created three class named sad, funny and laughing.

Train the Model.

Export and download the model of Tensorflow Lite

We are going to use the package tflite and image_picker.

Let go to the Installing and copy the line and paste to pubspec.yaml file.
After this, we will copy the code and paste in the android/app/build.gradle and in android block we will paste the code.

Also in tflite minSdkVersion should not be smaller than 16 because tflite does not support the version.

In this, I have converted the version from 16 to 19.
In Downloads extract the zip file and copy and paste in the folder.
Now we will add the assets to your application.
We will make some function for our application.
Declare the variables.

Import the packages the dart file.

Create function of initState in which declare _loading is true.
We have declare the function of loadModel and in setState declare _loading is false.

Create function of loadModel in which Tflite models and labels is declared to loadModel.

Create a pickImage in which ImagePicker is used with source of gallery.
If image is null,it will null else in setState declare_loading is true and _image = image.
We will declare the classifyImage function in which _image is given.

Create a classifyImage function which is in future we will run the models of tflite in here with path ,imageMean,imageStd,numResults,threshold,asynch.
In setState declare _loading is false and _outputs = output.

Create function of dispose of Tflite.

Come body:-
If loading is true then if _image is null then import the image form gallery else empty container. If _image is null then Also outputs is not empty then Text of labels is identified and displayed on screen.
We will declare SizedBox.
Then FloatingActionButton is declared with tooltip and in onPressed pickImage is declared.

Now debug the code.
As you can look here, we have choose the different image and easily identified by the tensorflow Lite and show the output on the screen.

Flutter works great with Tensorflow Lite, we can make lots of different types of applications in no time and test them as our proof of concept, all it will need is an idea and the training data. This type of approach is most suited and getting into all that trouble of finally converting the trained model to tflite type, Teachable Machine will do all that for you so you can focus on the application.
To get full code ,click below the link :-

👨💻Source Code:
https://github.com/Kunal923/TensorFlow_Lite/blob/master/lib/tensorflow.dart

✌Subscribe to CodeDecoders:
http://bit.ly/CodeDecoders
YouTube:
https://www.youtube.com/watch?v=1NoM72IZoqY&feature=youtu.be

Forem: Kunal Jain

Nested Scroll View Flutter

Code-Decoders / ten_news_yt

ten_news

Getting Started

Flutter XML Data Parsing

What is an RSS Feed?

xml2json

Using rssToJson in our homepage

Future.wait()

Code-Decoders / ten_news_yt

ten_news

Getting Started

Intregation of tensorflow Lite with Flutter

Using `rssToJson` in our homepage