
A month back or so I saw Github launched a new feature called Github Readmes which allowed developers to build some amazing looking readmes to add to their profile. After seeing all the amazing Readmes I thought to myself this looks good I should make one too for myself. The initial readme was just a copy-paste from other profiles that I found interesting. After a few days later I thought that this looks too generic, so decided to build an SVG banner, here's what the banner looked like.

![](https://raw.githubusercontent.com/fayeed/fayeed/f315032ff4b2367c10d78aab97449919dc2d0b3e/Banner.svg)

As you can see this looks great, but then I started to wonder what if I can make a customizable Github banner with random Avatars, gradients & stuff.

After doing some research I found that I could build an API that will serve the SVG, but as I started to build the API I found that the tags supported by the SVG are a little difficult to work with. So I wondered wouldn't it be good if I could use an HTML tag.

So I went off to google to find a solution and quickly found a post on MDN about `foreignObject` which allows the use of HTML tags inside SVG, though it is a little limited in styling.

> The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.

So this is how it works, you just need to add a new tag `foreignObject` inside which you need to add XHTML namespace, your SVG file would look something like this:

```svg
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="20" y="20" width="160" height="160">
    <style>
      div {
        color: red;
        bacgroundColor: green;
      }
    </style>
    <div xmlns="http://www.w3.org/1999/xhtml">
      Hello world
    </div>
  </foreignObject>
</svg>
```

And that's it. I won't talk about how I build the Github Banner, but just by using the method I was able to build something like this:

<img src="https://github-banner.vercel.app/api/social/?heading=Hi%2C+I+am+Fayeed+Pawaskar+-+%3Cbr+%2F%3E%0ACode+Tinkerer+%26+Software+Engineer&subheading=&social=%7B%22mail%22%3A%22fayeed%40live.com%22%2C%22linkedIn%22%3A%22fayeedpawaskar%22%2C%22github%22%3A%22%40fayeed%22%2C%22stackoverflow%22%3A%22%40fayeed%22%2C%22twitter%22%3A%22%40fayeedP%22%2C%22rss%22%3A%22fayeed.dev%2Frss.xml%22%7D&alignItems=flex-start&headingStyles=%7B%22fontSize%22%3A32%2C%22textAlign%22%3A%22start%22%2C%22color%22%3A%22%22%2C%22thirdDim%22%3Afalse%2C%22lineHeight%22%3A%22%22%2C%22fontWeight%22%3A%22700%22%7D&subheadingStyles=%7B%22fontSize%22%3A14%2C%22textAlign%22%3A%22start%22%2C%22color%22%3A%22%22%2C%22thirdDim%22%3Afalse%2C%22lineHeight%22%3A%22%22%2C%22fontWeight%22%3A%22500%22%7D&socialStyles=%7B%22fontSize%22%3A14%2C%22color%22%3A%22%22%2C%22iconColor%22%3A%22%22%2C%22lineHeight%22%3A%221%22%2C%22fontWeight%22%3A%22500%22%7D&background=%7B%22color%22%3A%22%22%2C%22image%22%3A%22%22%2C%22size%22%3A%22contain%22%2C%22repeat%22%3A%22no-repeat%22%2C%22position%22%3A%22center%22%7D&border=%7B%22size%22%3A0%2C%22color%22%3A%22%22%2C%22radius%22%3A8%7D&avatarStyles=%7B%22height%22%3A320%2C%22width%22%3A250%2C%22reverse%22%3Afalse%2C%22name%22%3A%22%22%2C%22hide%22%3Afalse%7D&gradient=true" width="100%" height="300" />

Check out the project below:

> [**fayeed/github-banner**](https://github.com/fayeed/github-banner)
>
> <small>Build custom Github banners for your Github profiles, to add some flair to your Readmes.</small>

Though the styling is limited at the moment for the banner because I just wanted to check the idea, I might add more styling options in the future for this, so stay tuned for more updates.


Using HTML inside SVG is as simple as adding two tags

Using HTML in SVG (Wait, What?)


I am going to keep this post short as I didn't have much time this week.

Sitemaps are very important for a website as they provide a guide or map for web crawlers like Google to easily find content & index them easier, anything you want the search engines to find must be included in the sitemap & anything not included is not indexed.

Creating a sitemap is easy but how would you do it if you have dynamic content like a blog post or maybe you have an e-commerce website.

Lucky for us, it's really simple I will go through the steps I went through while adding a sitemap to my site.

> **Fun fact:** You don't need a sitemap if your website is properly linked, doesn't have any dynamic content & has less than 500 pages.
>
> Also, sitemaps cannot include more than 50,000 URLs.

## What is the purpsose of the sitemap?

The Sitemap provides very helpful information to the crawlers like URL or location for the page, last modified date, how frequently the data is updated & the priority for this page.

Here's the sitemap for my website to explain the structure in more detail:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://fayeed.dev</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/building-my-personal-website-using-nextjs-ssg</loc>
    <lastmod>2020-08-06</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/how-to-make-inline-links-in-flutter</loc>
    <lastmod>2019-08-11</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/create-a-chat-app-in-minutes-in-flutter</loc>
    <lastmod>2019-08-05</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/projects</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
</urlset>
```

Sitemaps only use six different type of tags `urlset`, `<url>`, `<loc>`, `<lastmod>`, `<changefreq>` & `<prority>`.

### urlset

This is the top most tag & provides reference to the sitemap protocol to the search engines. All the url tags lives inside this tag.

### url

Parent tag for each url & all the remaining tags are children.

- `<loc>` - This specifies the location for the each page & must be start with a protocol like `http` or `https`.
- `<lastmod>` - This is a optional tag that specifies the last date this page was modified.
- `<changefreq>` - This is also a optional tag and its purpose it to show how frequently is this page content likely to change, think of reddit.
- `<prority>` - The priority of this url relative to others. Google acutally ignore this tag so need to use this.

## How do I create a sitemap for my site?

Well creating a sitemap is as easy as creating a new XML file in your project public/static root folder called `sitemap.xml` and follow the `xml` structure mentioned above.

You do also need to create a `robot.txt` file in the same folder & add a link to your sitemap there, this will allow the crawlers to easily find the sitemap if it is somewhere else other than the root of the URL.

```
User-agent: *
Sitemap: https://example.com/sitemap.xml
```

## How do I handle dynamic content?

If you have some form of dynamic content on your NextJs website like a blog, adding each URL to the sitemap can be kind of a pain. To easily resolve this we can create a helper function for this.

```ts
import fs from "fs";
import { PostData } from "../types/post_data";

export const generateSitemap = async (posts: PostData[]) => {
  const sitemap = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
      <loc>${BASE_URL}</loc>
  </url>
  <url>
    <loc>${BASE_URL}/blog</loc>
  </url>
  ${[...posts]
    .map((post) => `<url><loc>${post.canonicalUrl}</loc></url>`)
    .join("")}
  <url>
    <loc>${BASE_URL}/projects</loc>
  </url>
</urlset>`.replace(",", "");

  // writes sitemap.xml to public directory
  const path = `${process.cwd()}/public/sitemap.xml`;

  fs.writeFileSync(path, sitemap, "utf8");

  console.log(`generated sitemap`);

  return sitemap;
};
```

What this little helper function does it goes through, all the posts that we pass it, generates a sitemap string which we then write to our public folder using the `fs` module. In my case, I already had another helper function which gets all the markdown file & all the props in it I just passed it to this function.

And then in your `getStaticProps` method in your landing page you can just call this helper function & it will create the sitemap for you.

```ts
export const getStaticProps = async () => {
  // gets all the markdown files & returns the content in proper structure
  const posts = await loadBlogPosts();

  await generateSitemap(posts);
};
```

And don't forget to create `Robot.txt` file

```
User-agent: *
Sitemap: https://example.com/sitemap.xml
```


Generating a dynamic sitemap for the your site.

Generating a sitemap for your static Nextjs website.


Recently I found myself with a lot of free time on my hand, so I took a look at the list of things I would like to complete in 2020 and found one thing that was there from 2019, my website. Here are my goals for the site:

1. A blog to put my thoughts.
2. Dark mode support.
3. Faster load times.
4. A good SEO.

**Before we get started, here's the complete TechStack that I used:**

- Next.js
- React
- SCSS
- Typescript
- [Devii Boilerplate](https://devii.dev) - I changed a few things to make it fit my needs.

<hr />

## Faster load times & good SEO

Back in March Next.js released a new update v9.3, where they introduced a new feature SSG (Static Site Generation) which allowed Next.js users to generate Static sites from the Next.js projects, previously this was not possible if someone needs to build a Static site they had to rely on [Gatsby](https://www.gatsbyjs.org/) for this or just use good old HTML & CSS, which most people would say is still the best for your personal website.

But I still went with the Next.js because of these things:

- I like how Next.jS structures the project.
- It's easy to build Blogs now that Next.js support SSG
- I love ReactJS.

**Faster load times**

Load times for the pages can be improved drastically just by serving static files over a CDN, and since Vercel also provides CDN, we can leverage that to get faster load times.

> Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from the [Vercel Smart](https://vercel.com/home) CDN, which is blazingly fast.

**Loading SVG as React components**

To improve loading speed even more, I also converted SVG images to React Components using [React SVGR](https://react-svgr.com/playground/) which reduces network request as the SVG is now rendered as part of the HTML.

**Loading fonts from same domain**

I was initially loading fonts from [Google fonts](https://fonts.google.com/), which was taking about `0.4s` to load the fonts from thier server because of the round trip, I easily resolved it just by moving the fonts to `static` folder & then loading the fonts from the same domain.

**Good SEO**

NextJs by default provides good SEO because the content is available when search engines request pages to crawl unlike in client-side render web apps which have poor SEO.

SEO can be further improved by using a package like [NextSEO](https://github.com/garmeeh/next-seo) or just by manually handling it by using `meta` tags, but I would recommend NextSEO as it provides a better syntax & omits few redundant tags.

```tsx
import React from "react";
import { NextSeo } from "next-seo";

export default () => (
  <>
    <NextSeo
      title="My awesome website"
      description="My awesome website description"
      canonical="https://example.com"
      openGraph={{
        url: "https://example.com",
        title: "Open Graph Title",
        description: "Open Graph Description",
        images: [
          {
            url: "https://www.example.ie/og-image-01.jpg",
            width: 800,
            height: 600,
            alt: "Og Image Alt",
          },
        ],
        site_name: "SiteName",
      }}
      twitter={{
        handle: "@fayeedP",
        site: "@fayeed.dev",
        cardType: "summary_large_image",
      }}
    />
  </>
);
```

<hr />

## A blog to put my thoughts.

I used to post on [Medium](https://medium.com/@fayeed), but I didn't like how once you post on Medium it becomes their IP, that's why I decided to make my own blog.

Since v9.3 Next.js introduced a new API `getStaticProps` & `getServerSideProps`, here's what they do:

> `getStaticProps` (Static Generation): Fetch data at build-time.
>
> `getStaticPaths` (Static Generation): Specify dynamic routes to prerender based on data.
>
> `getServerSideProps` (Server-Side Rendering): Fetch data on each request.

By using `getStaticProps` we can get the blog post data at runtime & pass it as props to Component, which then later uses it to generate static pages.

Since I used [devii](https://devii.dev) most of this was set up by default, so didn't need to do much work here, but I will still give a brief rundown of how it works.

All the markdown files live under the `md/blog` folder from the root directory of the project, each markdown must have these fields, the below example is from [Create a chat app in minutes in Flutter](https://fayeed.dev/blog/create-a-chat-app-in-minutes-in-flutter).

```markdown
title: Create a chat app in minutes in Flutter
subtitle: Finally a better way to build your chat functionality
published: true
datePublished: 1564943400249
author: Fayeed Pawaskar
authorPhoto: /profile.jpg
bannerPhoto: https://cdn-images-1.medium.com/max/2700/1*pYJQe00OSztV3p5gFeG0Cw.jpeg
canonicalUrl: https://fayeed.dev/blog/create-a-chat-app-in-minutes-in-flutter
tags:

- Dash chat
- Flutter
- Dart
- Chat App
```

Then in `getStaticProps` function, we get content of the markdown files using `gray-matter` and then properly structure it before passing it to the component as props.

This makes a very easy to add more articles later as you just have to write markdown and push and Nextjs takes care of it.

<hr />

## Darkmode support

I initial used [Styled Components](https://styled-components.com/) as it comes with default Theming support, which was working pretty great initially but when I deployed to the Vercel and it generated Static site I started facing some problems with, styles were not copied to the articles pages, it was working as expected on other pages but for some reason not on blogs.

I tried fixing this issue using [Styled Components's](https://styled-components.com/) `ServerStyleSheet` Class, in `_document.ts` which collects all the styles from the parent `App` tag and pass it a `style` tag. This solved the problem but introduced a new one, whenever I go back to the index page from the blog post page it would completely break the styles.

```tsx
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
```

Finally, I decided to move everything from [Styled Components](https://styled-components.com/) to `SCSS` which solved all the problems but I would have loved to use Styled Components.

To support light & dark mode I wrote a small react hook that saves current mode to `localStorage` and adds a new class to body tag `light-mode` or `dark-mode` depending on the current mode.

```tsx
  export const darkMode(initialValue: boolean) {
    const [darkmode, setDarkmode] = useState(initialValue);

    const toggle = (value: boolean) => {
      document.body.classList.remove(!value ? "dark-mode": "light-mode");
      document.body.classList.add(value ? "dark-mode": "light-mode");
    }

    useEffect(() => {
      const value = localStorage.getItem("darkmode");

      if (value) {
        toggle(value);
      } else {
        document.body.classList.add(initialValue ? "dark-mode": "light-mode");
      }
    }, []);

    const toggleDarkmode = () => {
      localStorage.setItem("darkmode", !darkmode);

      setDarkmode(!darkmode);

      toggle(!darkmode);
    }

    return {darkmode, toggleDarkmode};
  }
```

And then based on the `body` tag class, I would then change the styles for the components.

```scss
body.light-mode {
  background-color: var(--light-body);
  color: var(--light-text);
}

body.dark-mode {
  background-color: var(--dark-body);
  color: var(--dark-text);
}
```

<hr />

Thanks for reading, if you have any questions or suggestions get in touch with me on [twitter](https://twitter.com/fayeedP).


My experience building my personal website & blog using NextJS.

Building my personal website using Nextjs SSG (Static Site Generation)


Have you wanted to add links, phone numbers, email in a block of text and make them clickable using a single Widget than I have just the thing for you? Recently I found myself in the same boat so I created a Widget called `flutter_parsed_text` .

> [**fayeed/flutter_parsed_text**](https://github.com/fayeed/flutter_parsed_text)
>
> <small>A Flutter package to parse text and extract parts using predefined types like url, phone and email and also supports Regex.</small>

So, In this tutorail, we are going to explore this widget and see how simple it is to create an Inline link in Flutter.

First, lets jus create a fresh flutter project using:

```bash
flutter create flutter_parsed_text_example
```

Now that we have a project let’s add the dependency to your `pubspec.yaml` .

```bash
url_launcher: ^5.0.3
flutter_parsed_text: ^1.2.0
```

We are almost ready to start, Let's add `ParsedText` to your starter code, you can add the text in `text` parameter that needs to be parsed. You can set alignment by setting `alignment` and also set a default style for the text which does not match the regex using `style` parameter.

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*S8AFQz0e9YYwfWicvoVidQ.png" alt="base app" >
</div>

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'example_app',
      home: Scaffold(
      body: Container(
          child: ParsedText(
              alignment: TextAlign.start,
              text:
                  "[@michael:51515151] Hello this is an example of the ParsedText,
                    links like http://www.google.com or http://www.facebook.com are clickable
                    and phone number 444-555-6666 can call too. But you can also do more with this package,
                    for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117.
                    foo@gmail.com And the magic number is 42! #flutter #flutterdev",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
        ),
      )
    );
  }
}
```

As you can see from the above example we have phone numbers, links, emails and also hashtags too. Since this library supports build-in types for email, links, and email there's no need to implement but we will have to implement custom regex for hashtag we will see that later, for now, let's start with build-in types.

ParsedText has`parse` parameter which takes a `List<MatchText>` . This `MatchText` the class has 4 parameters `type` , `style` , `onTap` , `pattern` let's go over them one by one:

- type: Uses build-in types for “email”, “phone” and “url”.

- style: Styles for the parsed text.

- onTap: Fires a callback function when this MatchText is tapped on.

- pattern: Custom regex to match text too.

Let’s the code example of this three build in types:

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*sD-1dyozEdDI1ZsJHwg6mw.png" alt="with parsed text added" >
</div>

```dart
ParsedText(
  alignment: TextAlign.start,
  text:
      "[@michael:51515151] Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. But you can also do more with this package, for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117. foo@gmail.com And the magic number is 42! #flutter #flutterdev",
  parse: <MatchText>[
    MatchText(
        type: "email",
        style: TextStyle(
          color: Colors.red,
          fontSize: 24,
        ),
        onTap: (url) {
          launch("mailto:" + url);
        }),
    MatchText(
        type: "url",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 24,
        ),
        onTap: (url) async {
          var a = await canLaunch(url);

          if (a) {
            launch(url);
          }
        }),
    MatchText(
        type: "phone",
        style: TextStyle(
          color: Colors.purple,
          fontSize: 24,
        ),
        onTap: (url) {
          launch("tel:" + url);
        }),
  ],
)
```

Let's also try to make hashtags clickable here’s how you do it. Just by overriding the `pattern` parameter, we can have a clickable hashtag like so:

```dart
ParsedText(
  alignment: TextAlign.start,
  text:
      "[@michael:51515151] Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. But you can also do more with this package, for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117. foo@gmail.com And the magic number is 42! #flutter #flutterdev",
  parse: <MatchText>[
    /*other match_text objects*/,
    MatchText(
      pattern: r"\B#+([\w]+)\b",
      style: TextStyle(
        color: Colors.pink,
        fontSize: 24,
      ),
      onTap: (url) async {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Hashtag clicked"),
              content: new Text("$url clicked."),
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                new FlatButton(
                  child: new Text("Close"),
                  onPressed: () {},
                ),
              ],
            );
          },
        );
      })
  ],
)
```

Here’s the final output:

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/1144/1*PtyrjE25szhiBFk9r9Rqbg.jpeg" alt="finished app" >
</div>

If you want a to take a look at the working example you take a look the example folder in the packages Github repository.

> [**fayeed/flutter_parsed_text**](https://github.com/fayeed/flutter_parsed_text/tree/master/example)
>
> <small>A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started if this is your first Flutter project.</small>

Thanks for reading.


Make Inline links in Flutter using flutter_parsed_text

How to make inline links in Flutter.


Recently I started working on a Social Media app and needed to build a Chat UI for it, as I come from React Native background I usually use react-native-gifted-chat which is Chat UI library for React Native and it mostly takes care of everything. As I was unable to find a Chat UI library for Flutter I thought of creating one myself, which I released under the name Dash Chat.

> [**fayeed/dash_chat**](https://github.com/fayeed/dash_chat)
>
> <small>The most complete Chat UI for flutter Inspired by react-native-gifted-chat. Highly customizable and helps developing chat UI faster. </small>

As there are lots of chat tutorial available so I will keep this tutorial short and simple. We will just try to implement Firebase and Dash together. If you are ready to get your timer out because we will build this app in 15 minutes.

---

## 1, 2, 3… here we go

The first thing that we need do is create a Flutter Project you can use VsCode plugin for this or Flutter CLI and also setup Firebase. To set up firebase you can follow the guide below:

> [**How to use Firebase with Flutter**](https://medium.com/47billion/how-to-use-firebase-with-flutter-e4a47a7470ce)

Ok, great now that you have set up firebase we will add all the dependencies that we need for this tutorial in `pubspec.yaml.`

```yaml
dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  cloud_firestore:
  firebase_storage:
  image_picker:
  shared_preferences:
  uuid:
  dash_chat: 1.0.4
```

In your `main.dart` the file you will have this as a starting point:

**Laying the Auth screen**

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*Is3yeNntnN9Mr-TRRFkNtQ.jpeg" alt="laying the auth screen" >
</div>

We begin by creating the `MyHomePage` widget which we will use to get the `username` and also to authenticate the user on firebase anonymously.

```dart
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  TextEditingController _editingController = TextEditingController();
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dash Chat"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _editingController,
                decoration: InputDecoration(hintText: "Enter Name here..."),
                validator: (val) {
                  if (val.length < 3) {
                    return "Name to short";
                  }
                  return null;
                },
              ),
              SizedBox(
                height: 40.0,
              ),
              FlatButton(
                child: Text("Next"),
                onPressed: () async {
                  // Check to see if username was correct if not dont authenticate
                  if (_formKey.currentState.validate()) {
                    try {
                      // Authenticate the user
                      await FirebaseAuth.instance.signInAnonymously();

                      // If authentication was sucessful move to chat screen.
                      // with username and uuid
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => ChatScreen(
                            username: _editingController.text,
                            uuid: Uuid().v4().toString(),
                          ),
                        ),
                      );
                    } catch (e) {
                      print(e);
                    }
                  }
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}
```

---

**Laying the Chat screen**

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*7lHy_0S4qkE3PwidIWw4VQ.png" alt="laying the chat screen" >
</div>

Now that we have authenticated the user and we can start with the actual thing that you are here for, first lets set up the `ChatScreen.dart`

```dart
class ChatScreen extends StatefulWidget {
  final String username;
  final String uuid;

  ChatScreen({this.username, this.uuid});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  ChatUser user = ChatUser();

  @override
  void initState() {
    user.name = widget.username;
    user.uid = widget.uuid;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dash Chat"),
      ),
      body: Container(),
    );
  }
}
```

Let’s remove the Container and replace with `StreamBuilder` so that we can listen to `Firestore` for changes. In your builder method, we are checking to see if we the stream has any data if not we show a `CircularProgressIndicator`and or else show the chat app.

```dart
StreamBuilder(
          stream: Firestore.instance.collection('messages').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(
                      Theme.of(context).primaryColor),
                ),
              );
            } else {
              return DashChat(
                user: user,
              );
            }
          },
),
```

---

We will now start using implementing different features in the `dash_chat`widget. This widget has 52 properties that you can override to customize it however you want for this tutorial we will implement only a few of those properties but you can check the GitHub page for detail.

```dart
List<DocumentSnapshot> items = snapshot.data.documents;
var messages =
    items.map((i) => ChatMessage.fromJson(i.data)).toList();

return DashChat(
         user: user,
         messages: messages,
       );

```

we will only override these properties in this tutorial:

1. user (Require)

2. messages (Require)

3. inputDecoration

4. onSend

5. trailing

We have already passed the user object to the `DashChat` widget now we need to pass a `List<ChatMessage>` to the DashChat for that, we will first need to convert the retrieved data from Firebase to `ChatMessage` we can do that above the widget using the `ChatMessage.fromJson` constructor.

After this, you will have a working chat app but we still have few things missing you cannot add message let do that now, to that you need to add a parameter called `onSend` which as a parameter gets the `ChatMessage` object back which we can then send to Firebase, make a note that we are running a transaction because since this is a 1-to-many chat so we might run it a lot of problems:

```dart
onSend: (message) {
  var documentReference = Firestore.instance
      .collection('messages')
      .document(
          DateTime.now().millisecondsSinceEpoch.toString());

  Firestore.instance.runTransaction((transaction) async {
    await transaction.set(
      documentReference,
      message.toJson(),
    );
  });
},
```

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*K1jBodpy7GfPnxE4o_nX6w.png" alt="send message" >
</div>

Now that we can successfully send messages we will move to upload images to Firebase Storage for this we will need to add a button in the input bar so that we can open gallery for this we can use to parameters first `leading` which will add widgets before the input and `trailling` which will add widgets after for this tutorial we will use `trailling`.

```dart
trailing: <Widget>[
  IconButton(
    icon: Icon(Icons.photo),
    onPressed: uploadFile,
  )
],
```

Now that we have the icon we can use to call `uploadFile` method which will upload the file to Firebase to get the file from the gallery we will use `image_picker` package if you want to get the image from camera you change the source to `ImageSource.camera`.

```dart
void uploadFile() async {
  File result = await ImagePicker.pickImage(
    source: ImageSource.gallery,
    imageQuality: 80,
    maxHeight: 400,
    maxWidth: 400,
  );

  if (result != null) {
    String id = Uuid().v4().toString();

    final StorageReference storageRef =
        FirebaseStorage.instance.ref().child("chat_images/$id.jpg");

    StorageUploadTask uploadTask = storageRef.putFile(
      result,
      StorageMetadata(
        contentType: 'image/jpg',
      ),
    );
    StorageTaskSnapshot download = await uploadTask.onComplete;

    String url = await download.ref.getDownloadURL();

    ChatMessage message = ChatMessage(text: "", user: user, image: url);

    var documentReference = Firestore.instance
        .collection('messages')
        .document(DateTime.now().millisecondsSinceEpoch.toString());

    Firestore.instance.runTransaction((transaction) async {
      await transaction.set(
        documentReference,
        message.toJson(),
      );
    });
  }
}
```

<div style="text-align:center">
  <img src="https://cdn-images-1.medium.com/max/432/1*FbmWZeO9QRNgJXDGF1r2JQ.png" alt="Finished app" >
</div>

Yay!!! Now you have a fully functional chat app which you can customize completely, we haven’t fully explored all the parameters in this tutorial but if like for me cover let me know in the comments in the meantime you can take a look at the docs in the link mentioned above.

Here’s the link to the Github repository:

> [**fayeed/dash_chat_example**](https://github.com/fayeed/dash_chat_example)
>
> <small>A new Flutter project. This project is a starting point for a Flutter application.</small>

Thank you for reading.


Fayeed Pawaskar

Where I've worked

Things I've shipped

Writing

Open Source

Available for work

Stack

Got something
interesting?