Forem: Idorenyin Obong

Build an anonymous chat app with React & React bootstrap

Idorenyin Obong — Thu, 27 Jun 2019 06:59:05 +0000

This article was first published on CometChat's tutorial page.

To follow this article effectively, it is expected that you have the following:

Prior knowledge of React. You can use this resource to get up to speed with it.
Node.js and NPM installed on your machine.
A text editor or IDE. VSCode is recommended.

Introduction

Allowing users to communicate is becoming an essential feature for many apps. In my experience, chat closes the distance between you and your customers and can lead to more conversions, improved engagement; and ultimately, greater success for your business. However, implementing chat can be time-consuming.

In this tutorial, I am excited to show you how you can build an aesthetic group chat with minimal code by leveraging, React, React Bootstrap, and CometChat.

Here is a preview of what you will build:

You can choose to dive right into code or go through our step by step tutorial.

Scaffolding a new React project

For this article, to quickly scaffold a new React app, you will use one of the very popular tools available – the create-react-app CLI tool. Open a terminal, move into the directory where you usually save your projects and run this command:

npx create-react-app react-anonymous-chat

After running the command, the CLI will begin the process of installing the default dependencies for a React project. Depending on your internet speed, this should take a couple of minutes to complete. After setting up your project, open your new project in your preferred text editor or IDE.

Installing Dependencies

Now that you have scaffolded your app, the next step is to install dependencies necessary for your chat application. For this article, you’ll need the following:

@cometchat-pro/chat: This module will enable us to connect to CometChat and begin sending and receiving messages in real-time
react-bootstrap: This is a UI library built on top of react and core Bootstrap. You will use it to style the entire app in this article
react-router-dom: You will use it for client-side routing
uuid: This module will be used to generate unique identifiers

To install the above modules, run the following commands:

# move into your project directory
cd react-anonymous-chat

# install dependencies using npm
npm install @cometchat-pro/chat react-bootstrap react-router-dom uuid

Setting up

To begin using the CometChat Pro SDK in your newly created React project, you’ll need a CometChat Pro account. If you don’t have an account, you can quickly create one here.

After creating an account, go to your dashboard and create a new app called react-anonymous-chat. After creating a new app, you will find the APP ID attached close to the name of your app. If you open your app and go to the API Keys section, you will see a key with fullAccess scope. Copy it out as well as the APP ID. We’ll need these shortly.

Get the CometChat API

Next, create a .env file in the root of your project to store your app credentials. Take care not to commit this file to version control! This is important for protecting your secrets when you publish your app. You can easily create the file by running this command:

touch .env

Open the file and paste this snippet:

REACT_APP_COMETCHAT_APIKEY=YOUR_API_KEY_GOES_HERE
REACT_APP_COMETCHAT_APPID=YOUR_APP_ID_GOES_HERE

Replace the placeholders with your APP ID and API KEY from your dashboard.

Since your keys are now ready, you can initialize CometChat in the index.js file generated by Create React App. Open your index.js file and replace it with this snippet:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CometChat } from '@cometchat-pro/chat';

CometChat.init(process.env.REACT_APP_COMETCHAT_APPID)
  .then(() => {
    console.log('Initialised CometChat');
  })
  .catch(() => {
    console.log('Failed to Initialise CometChat');
  });

ReactDOM.render(, document.getElementById('root'));

Before going ahead, you’ll need to import Bootstrap in public/index.htm like so:

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Building your components

Your app will have three components, the signup, home, and chat component. The signup component is the page that will enable users to create new accounts. Create a folder named components inside the src directory. This is where you will add your components.

Signup component

In this component, you will build out a form to help create new users on the app. A user will have a UID, an email address, and a name. The UID value has to be unique.

Create a new file named Signup.js, Inside the file, add these imports:

import React from 'react';
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Form from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert'
import Spinner from 'react-bootstrap/Spinner'
import { Redirect, Link } from 'react-router-dom'

Here, you are importing some components from the core react-bootstrap components as well as components from react-router-dom dependency.

Next, you define the initial state for your signup component in the Signup.js file:

class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: '',
      name: '',
      email: '',
      UIDError: null,
      errors: null,
      redirect: false,
      isLoading: false
    };
  }
  //... other class methods
}
export default Signup;

Here, you defined a state to hold data for the signup form and error messages. Here are the specific functions of each of the objects declared in the state:

uid: This holds the current value of the text inputted in the username form field.
name: This holds the current value of the user’s name in the form field.
email: This holds the current value of the user’s email in the form field.
UIDError: This object will keep track of errors when validating the username field.
errors: This stores error messages when validating other fields.
redirect: This keeps tracks of success on form submission.
isLoading: This is used for providing visual feedback when using <Spinner /> component.

The UIDError object keeps track of errors on the username field while errors keeps track of errors on other fields. They are separated because the username field does not accept spaces and as such, they do not have the same validation logic.

After defining the state, you will create the user interface to represent the current state of your application. Add this render method to your Signup class:

render() {
  if (this.state.redirect) return ;
  return (
    <React.Fragment>
      <Row
        className='d-flex justify-content-center align-items-center w-100 mt-5'
        style={{
          minHeight: '100%'
        }}
      >
      >Col>
        {this.state.errors !== null && (
          <Alert variant='danger'>
            <ul>
              {this.showErrors().map(err => (
                <li key={err}>{err</li>
              ))}
            </ul>
          </Alert>
        )}
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId='username'>
            <Form.Label>User ID</Form.Label>
            <Form.Control
              required
              type='text'
              name='uid'
              value={this.state.uid}
              placeholder='Choose a username'
              onChange={this.handleChange}
            />
            {this.state.UIDError !== null && (
              <Form.Control.Feedback
                style={{ display: 'block' }}
                type='invalid'
              >
                {this.state.UIDError}
              </Form.Control.Feedback>
            )}
            </Form.Group>
              <Form.Group controlId='display-name'>
                <Form.Label>Name</Form.Label>
                <Form.Control
                  required
                  type='text'
                  name='name'
                  value={this.state.name}
                  placeholder='What is your name?'
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Form.Group controlId='email'>
                <Form.Label>Email Address</Form.Label>
                <Form.Control
                  required
                  type='email'
                  name='email'
                  value={this.state.email}
                  placeholder='Your email address'
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Button
                disabled={this.state.isLoading}
                variant='primary'
                type='submit'
                className='btn-block'
              >
                {this.state.isLoading ? (
                  <>
                    <Spinner
                      as='span'
                      animation='grow'
                      size='sm'
                      role='status'
                      aria-hidden='true'
                    />
                    Please wait...
                  </>
                ) : (
                  <span>Create My Account</span>
                )}
              </Button>
              <p className='pt-3'>
                Already have an account? <Link to='/'>Login</Link>
              </p>
            </Form>
          </Col>
        </Row>
      </React.Fragment>
    );
  }

Here in this snippet, you declared a form where the values of the inputs are bound to the state you defined earlier. The form contains three inputs with native form validation except for the username input. It also contains a <Redirect />component and a Link that renders the home component where necessary.

Next, you will create three methods used in the render method, namely: handleChange, handleSubmit and showErrors. Add these methods to the your Signup.js file:

handleChange = e => {
  if (e.target.name === 'uid') {
    const uid = e.target.value;
    if (uid.indexOf(' ') > 0) {
      this.setState(
        { UIDError: 'Username cannot contain white spaces' },
        () => {
          console.log(this.state.UIDError);
        }
      );
    } else {
      this.setState({ UIDError: null });
    }
  }
  this.setState({ [e.target.name]: e.target.value });
};

handleSubmit = e => {
  e.preventDefault();
  const { uid, name, email } = this.state;
  this.setState({ uid: '', name: '', email: '', isLoading: true });
  fetch('https://api.cometchat.com/v1/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      appid: process.env.REACT_APP_COMETCHAT_APPID,
      apikey: process.env.REACT_APP_COMETCHAT_APIKEY
    },
    body: JSON.stringify({
      uid,
      name,
      email
    })
  })
  .then(response => response.json())
  .then(data => {
    const error = data.error;
    if (error) {
      this.setState(
        {
          isLoading: false,
          errors: { ...error.details }
        },
        () => {
          this.showErrors();
        }
      );
      return;
    }
    this.setState({
      isLoading: false,
      redirect: true
    });
  });
};

showErrors = () => {
  const errors = this.state.errors;
  let errorMessages = [];
  if (errors !== null) {
    for (const error in errors) {
      errorMessages = [...errorMessages, ...errors[error]];
    }
  }
  return errorMessages;
};

If you are building a production app, it is not proper to keep your keys on the frontend. Instead, the keys should be kept on the server-side so that the private key can remain private.

The handleChange method updates the values of all the input fields as the user types. A custom validation is performed on the username field to prevent usernames without white spaces. The handleSubmit() method makes a POST request to the account creation API: https://api.cometchat.com/v1/users with the details entered by the user. If it is successful, you are then redirected to the home page. The showErrors method is used to show errors.

Home component

Now that you are done with the signup component, you will now build the home component. This component is to enable logging in of users.

Create a new file Home.js inside the /src/components directory. Inside the file, add these imports:

import React from 'react';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Alert from 'react-bootstrap/Alert';
import Spinner from 'react-bootstrap/Spinner';
import { CometChat } from '@cometchat-pro/chat';
import { Redirect, Link } from 'react-router-dom';

Here, you imported components that you will make use of just like you did in the signup component. After that, add this snippet in the class:

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      user: null,
      error: null,
      redirect: false,
      isLoading: false
    };
  }

  //... other class methods

}
export default Home;

Here, you declared the initial state for this component. This is similar to what you did in the signup component also, except that you have a username and user object to hold data about the logged in user.

After that, add these two methods to your class handleChange and handleSubmit like so:

handleChange = e => {
  this.setState({ username: e.target.value });
};

handleSubmit = e => {
  e.preventDefault();
  const username = this.state.username;
  this.setState({ username: '', isLoading: true });
  CometChat.login(username, process.env.REACT_APP_COMETCHAT_APIKEY)
  .then(user => {
    this.setState({ redirect: true, user, isLoading: false });
    localStorage.setItem('cometchat:authToken', user.authToken);
  })
  .catch(err => {
    this.setState({ error: err.message, isLoading: false });
  });
};

The handleChange method updates the value of the input field as the user types while the handleSubmit method will call the login method provided by CometChat. To make a login request, the API key defined in the .env file is passed alongside the username.

On successful login, the user data is returned and the authToken is saved for re-authentication later. Next, add the render method for this component below the handleSubmit method like so:

// other methods above...
render() {
  if (this.state.redirect)
  return (
    <Redirect
      to={{
        pathname: '/chat',
        user: this.state.user
      }}
    />
  );
  return (
    <React.Fragment>
      <Row
        className='d-flex justify-content-center align-items-center w-100 mt-5'
        style={{
          minHeight: '100%'
        }}
      >
        <Col xs={10} sm={10} md={4} lg={4} className='mx-auto mt-5'>
          {this.state.error !== null && (
            <Alert variant='danger'>{this.state.error}</Alert>
          )}
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId='username'>
              <Form.Label>Username</Form.Label>
              <Form.Control
                required
                type='text'
                value={this.state.username}
                placeholder='Enter a Username'
                onChange={this.handleChange}
              />
            </Form.Group>
            <Button
              disabled={this.state.isLoading}
              variant='primary'
              type='submit'
              className='btn-block'
            >
              {this.state.isLoading ? (
                <>
                  <Spinner
                    as='span'
                    animation='grow'
                    size='sm'
                    role='status'
                    aria-hidden='true'
                  />
                  Loading...
                </>
              ) : (
                <span>Login</span>
              )}
            </Button>
            <p className='pt-3'>
              Don't have an account? <Link to='/signup'>Create One</Link>
            </p>
          </Form>
        </Col>
      </Row>
    </React.Fragment>
  );
}

In this snippet, you have a login form to take the user’s username. When the user clicks on the Login button, you take the user input and call the handleSubmit method you defined earlier in this component. If a success response is received, the user is redirected to the chat component, else, an error is displayed.

Chat component

This is the component where a user will be able to view messages and send messages in a chat group. First, create a new Chat.js file in the src/components directory. After that, add these imports:

import React from 'react';
import { CometChat } from '@cometchat-pro/chat';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Navbar from 'react-bootstrap/Navbar';
import { Redirect } from 'react-router-dom';
import uuid from 'uuid';

After that, add a class with a state inside the Chat.js file like so:

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      user: null,
      receiverID: 'supergroup',
      messageText: '',
      messages: [],
      authToken: null,
      messageType: CometChat.MESSAGE_TYPE.TEXT,
      receiverType: CometChat.RECEIVER_TYPE.GROUP
    };
  }
  //... other class methods
}

export default Chat;

Here, you need a messages array to store all messages sent and received on the group. The messageType and receiverType objects define the type of message you want to listen for and for whom the message is for. The receiverID object is used to identify the group name on which you listen for messages. Here, you used the default group generated for you – supergroup.

After that, add the render method for the component just below the constructor like this:

render() {
  if (this.state.redirect) return <Redirect to='/' />;
  return (
    <div
      className='bg-light page'
      style={{ height: '100vh', overflowX: 'hidden' }}
    >
      <Row>
        <Col>
          <Container>
            <div className='d-flex align-items-center justify-content-between'>
              <h3 className='text-center py-3 d-inline'>
                React Anonymous Chat
              </h3>
              <Button onClick={e => this.logout()} variant='outline-primary'>
                Logout
              </Button>
            </div>
            <ul className='list-group' style={{ marginBottom: '60px' }}>
              {this.state.messages.length > 0 ? (
                this.state.messages.map(msg => (
                  <li className='list-group-item' key={uuid()}>
                    <strong>{msg.sender.name}</strong>
                    <p>{msg.text}</p>
                  </li>
                ))
              ) : (
                <div className='text-center mt-5 pt-5'>
                  <p className='lead text-center'>Fetching Messages</p>
                </div>
              )}
            </ul>
          </Container>
        </Col>
      </Row>
      <Navbar fixed='bottom'>
        <Container>
          <Form
            inline
            className='w-100 d-flex justify-content-between align-items-center'
            onSubmit={this.sendMessage}
          >
            <Form.Group style={{ flex: 1 }}>
              <Form.Control
                value={this.state.messageText}
                style={{ width: '100%' }}
                required
                type='text'
                placeholder='Type Message here...'
                onChange={this.handleChange}
              />
            </Form.Group>
            <Button variant='primary' type='submit'>
              Send
            </Button>
          </Form>
        </Container>
      </Navbar>
    </div>
  );
}

In this render method, you have a <Redirect /> component that redirects to the home component when there is no logged in user. You also have a message box that displays all messages sent and received in the group, and finally, you have a form to handle the sending of messages.

There are some methods that are called here, don’t worry yet, you will soon define these methods. Now that you have built the UI for the chat component, the next thing is to show messages to the user. You will do this as soon as the component is mounted. In your Chat.js file, add this method:

componentDidMount() {
  this.setState({ user: this.props.location.user });
  this.getUser();
  this.receiveMessages();
}

This is a callback function provided by React. In this method, you will fetch the user details and listen for new messages in the group. Now, add the getUser() method like so:

getUser = () => {
  CometChat.getLoggedinUser().then(
    user => {
      this.joinGroup();
    },
    error => {
      const authToken = localStorage.getItem('cometchat:authToken');
      if (authToken !== null) {
        this.setState({ authToken }, () => {
          this.reAuthenticateUserWithToken(this.state.authToken);
        });
      } else {
        this.setState({ redirect: true });
      }
    }
  );
};

In this method, you get the logged in user and join the group using the joinGroup() method . If an error occurs in getting the user, the authToken stored in localStorage serves as a fallback option for re-authenticating the user. The joinGroup() method is not defined yet. Create the method inside your Chat.js to look like this:

joinGroup = () => {
  const GUID = this.state.receiverID;
  const password = '';
  const groupType = CometChat.GROUP_TYPE.PUBLIC;
  CometChat.joinGroup(GUID, groupType, password).then(
    group => {},
    error => {
      if (error.code === 'ERR_ALREADY_JOINED') {
        this.reAuthenticateUserWithToken();
      }
    }
  );
};

Here in this method, the user is subscribed to this group and they can now send and receive messages from this group. Also, the fetchMessages() method is called to fetch previous messages when the user successfully joins the group. Add the fetchMessages() method too:

fetchMessages = () => {
  const GUID = this.state.receiverID;
  const limit = 30;
  const messagesRequest = new CometChat.MessagesRequestBuilder()
    .setGUID(GUID)
    .setLimit(limit)
    .build();
  messagesRequest.fetchPrevious().then(
    messages => {
      const textMessages = messages.filter(msg => msg.type === 'text');
      this.setState({ messages: [...textMessages] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message fetching failed with error:', error);
    }
  );
};

This fetches the previous messages sent to the group. To enable users to see the newest messages, the scrollToBottom() method is called. Add a scrollToBottom() method to your class like so:

scrollToBottom = () => {
  const page = document.querySelector('.page');
  page.scrollTop = page.scrollHeight;
};

Now that you can fetch previous messages, it’s time to enable users to send new messages too. To achieve this, you first need to create a handleChange() method to update the state whenever the user types a new message. Add this method to your class component:

handleChange = e => {
  this.setState({ messageText: e.target.value });
};

Thereafter, you add the sendMessage method like so:

sendMessage = e => {
  e.preventDefault();
  const { receiverID, messageText, messageType, receiverType } = this.state;
  const textMessage = new CometChat.TextMessage(
    receiverID,
    messageText,
    messageType,
    receiverType
  );
  CometChat.sendMessage(textMessage).then(
    message => {
      this.setState({ messageText: '' });
      const oldMessages = [...this.state.messages];
      const filtered = oldMessages.filter(msg => msg.id !== message);
      this.setState({ messages: [...filtered, message] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message sending failed with error:', error);
    }
  );
};

This method is called when the form in the render() method is submitted. After the sendMessage method of ComeChat is called, the input field is cleared and new messages will be added to the messages array. New messages are also filtered in case of duplicates, and lastly, the scrollToBottom() is called to give focus to new messages.

The second method you called in the componentDidMount method was receiveMessages. Now, create the method inside your class:

receiveMessages = () => {
  const listenerID = 'supergroup';
  CometChat.addMessageListener(
    listenerID,
    new CometChat.MessageListener({
      onTextMessageReceived: textMessage => {
        const oldMessages = this.state.messages;
        oldMessages.push(textMessage);
        this.setState(
          {
            messages: [...oldMessages]
          },
          () => this.scrollToBottom()
        );
      }
    })
  );
};

Since it’s only text messages that you are concerned with, only the onTextMessageReceived handler is used. On receiving new messages, the messages array is updated to show messages in real time.

After that, you have to add a logout method to enable authenticated users to log out of the application. Add a logout method in the Chat.js file like so:

logout = () => {
  CometChat.logout().then(() => {
    localStorage.removeItem('cometchat:authToken');
    this.setState({ redirect: true });
  });
};

When a user clicks the logout button, you call the logout() method, then, you reset the localStorage and redirect the user to the Home page.

Now that you have defined your components, you would update the App.js file with the routes. Open your App.js file and replace it with this:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Chat from "./components/Chat";
import Signup from "./components/Signup";
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/signup" component={Signup} />

      </Switch>
    </Router>
  );
}
export default App;

Now, you have successfully finished building your app. Run this command in the root directory of your app:

npm start

You should have something similar to what was shown to you earlier.

Conclusion

In this article, you learned how to build an anonymous chat using React, React Bootstrap and CometChat Pro. You can now comfortably integrate group chats into React apps. As far as CometChat Pro SDK goes, there are a ton of other features not covered in this article. Feel free to expand on this by diving deeper into the documentation.

Building with Flutter!

Idorenyin Obong — Fri, 30 Mar 2018 14:11:49 +0000

Flutter is a mobile cross-development platform still in its beta. Flutter most importantly gives us the native feel with a better performance as compared to its competitors. In this article, we will learn why Flutter is a good option for development and we will also create a simple app with it. You can find the GitHub repository for this sample here.

Introduction

Many companies prefer to use “one stone to kill two birds.” Therefore opting for cross-platform development is a natural decision. Over the years, cross-development platforms have been introduced with the aim of achieving this feat. The reasons for this choice include:

A quick prototype of a product.
A wider range of users with lesser investments etc.

This option and decision obviously saves time and cost - two very important entities.

The earlier released cross-development platforms such as PhoneGap, Cordova, Ionic among others mostly used JavaScript and as such, they came with some bottlenecks. This was due to the extra effort required for the JavaScript code to communicate with the native code. According to a senior software engineer at Google here, these platforms needed a bridge to communicate with the native code thereby causing performance lapses in the process.

Why Flutter?

Flutter is an open source mobile app SDK from Google used in developing Android and IOS apps. The aim of Flutter is to produce the native feel which is rare in its competitors while utilizing a single codebase. Flutter considers differences in alignments, scrolling behaviors, typography, icons, and more when rendering your app to its platform. Flutter has been in development as far back as 2015 - the first commit which contained the AUTHORS, LICENSE and README.md files was made on 30th October, 2015.

However, it was officially announced and presented to the world during the Google IO in 2017. And so, the question arises - is Flutter any different from other cross-development platforms ?
Yes! Definitely! And here are some of its features you should take note of:

Better performance: One of the major reasons for the success and better performance of Flutter is the choice of language- Dart. Dart is compiled “ahead of time” (AOT) into native code and so it is easier for Flutter to communicate to the platform rather than use a bridge like the case of the JavaScript frameworks. Similarly, the way Flutter works, it needs to create and destroy a large number of short-lived objects very fast. Dart’s garbage collection is very well suited for such a use case.
Hot reload: This is a feature that helps you update your code on the fly without restarting the entire app.
A new approach to Widgets: In Flutter, everything is a widget. From layouts to alignments to padding, etc.
Flutter is reactive: Flutter is inspired by React Native and just like React Native, it provides reactive-style views.

Setting up!

Before we get started with coding. We need to setup Flutter on our system. You can do that following the steps here:

Clone the GitHub repository.

git clone -b beta https://github.com/flutter/flutter.git
Add Flutter to your PATH. Follow these instructions
Run this command in your terminal:

flutter doctor

This is so you will be alerted of any other necessary dependency needed to complete the setup. You can always fall back to the Flutter docs if you encounter any hitch while setting this up.

Before going ahead, you should also have the following:

An IDE(Integrated Development Environment). You can use Intellij IDEA, Android Studio or Visual Studio Code. You can learn how to configure them here.
An introductory knowledge of OOP(Object Oriented Programming).

What we will Build

In this demo, we will make use of the Rick and Morty API to build a simple Flutter app that will do the following:

Fetch all the characters from the API and parse the JSON response.
Setup a list view to display the response which includes the image and the name of a character.

Building our app

Open your IDE and create a new Flutter application. We will name it rick_and_morty. This conforms to the naming conventions of Flutter projects (i.e small letters with underscores only). The project will have this file structure.

The only functionality we will implement here that will require an external package is loading of images. So, go ahead, open your pubspec.yaml file and add the cached_network_image package:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0
  cached_network_image: "^0.3.0"
  # Other dependencies if you so which!

Click the ‘Packages get’ button at the top right corner so that the package will be fetched. The rest of our modifications for this app will be done in the main.dart file. The default app comes with a whole lot of boilerplate codes that we do not need for this demo. You should clear them out and have just this in the file:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
var httpClient = new HttpClient();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Rick and Morty',
      home: new RickAndMorty(),
    );
  }
}

Here in this snippet, we have a class which extends a stateless widget. And in the overridden build method, we return a MaterialApp with some modified properties. The title property is changed to ‘Rick and Morty’ - this will reflect as the text on our app bar. We also modified the home property to return yet another widget which we will implement later on. The class is called in the main method and this is the widget shown when we run our app. We also created an instance of HttpClient which we will use for our network calls.

The RickAndMorty widget which is returned through the home property is going to be a stateful widget. Flutter has two types of widgets, stateless and stateful widgets. Stateless widgets are widgets whose properties cannot change - that is the equivalent of constants while stateful widgets are widgets whose properties can change. Let us now set up our RickAndMorty widget. Paste this snippet still in your main.dart file:

class RickAndMorty extends StatefulWidget {
  @override
  createState() => new RickAndMortyState();
}

class RickAndMortyState extends State<RickAndMorty> {
  var modelList = <Model>[];
  final _customFont = const TextStyle(fontSize: 18.0);

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Rick and Morty'),
      ),
      body: _buildListView()
    );
  }
}

Variables and methods prefixed with _ are private to the class.

To create a stateful widget, we create a class which extends StatefulWidget, we then override the createState method to return a new class which extends State<RickAndMorty>. We did exactly that in the snippet above. According to the docs:

If you want to visually present stateful data in a widget, you should encapsulate this data in a State object. You can then associate your State object with a widget that extends the StatefulWidget class.

In the RickAndMortyState class, we created a new list to hold custom data. This data is contained in the Model class stored in the model.dart file. Create a new file model.dart and set it up like this:

class Model{
  String name;
  String imageUrl;
}

The class contains two strings to hold the name of the character and the image URL.

Still in the RickAndMortyState class, we overridded the initState method and made our network call here by calling the _getRickAndMortyCharacters function. Setup the function within the class like this:

_getRickAndMortyCharacters() async {
  var url = 'https://rickandmortyapi.com/api/character';

  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((LogRecord rec) {
    print('${rec.level.name}: ${rec.time}: ${rec.message}');
  });
  var _LOG = new Logger("R&M");

  var httpClient = new HttpClient();

  List<Model> result = <Model>[];
  try {
    var request = await httpClient.getUrl(Uri.parse(url));
    var response = await request.close();
    if (response.statusCode == HttpStatus.OK) {
      var json = await response.transform(UTF8.decoder).join();
      var data = JSON.decode(json);

      for (var k in data['results']) {
        var model = new Model();
        model.name = k['name'].toString();
        model.imageUrl = k['image'].toString();
        result.add(model);
      }

      httpClient.close();
    } else {
      _LOG.severe(response.statusCode);
      _LOG.severe(response);
    }
  } catch (exception) {
    _LOG.severe(exception);
  }


  if (!mounted) return;

  setState(() {
    modelList = result;
  });

}

This function performs our network call and assigns the result to our modelList. The setState function is an internal function used to inform the framework of a change in the object.

Finally, in the build method of the RickAndMortyState class, we return a widget where we still specify the title and body. Here, the body is another method - _buildListView which returns a widget and setups our list-view. Create a function within the class and set up the method like this:

Widget _buildListView(){
  return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemCount: modelList.length,
      itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return new Divider();

        return _buildRow(modelList[i]);
      }
  );
}

In the ListView.builder , we added padding to the view, we set our length to be the size of the list, we returned a divider line to add some swagger to our list, and we returned another widget by calling the _buildRow function. The _buildRow function describes how a single item in the list will look like. Create the function within the class and set it up like this:

Widget _buildRow(Model model) {
  return new ListTile(

    title: new Text(
      model.name,
      style: _customFont,
    ),

    leading: new CachedNetworkImage(
      imageUrl: model.imageUrl,
      placeholder: new CircularProgressIndicator(),
      errorWidget: new Icon(Icons.error),
    )

  );
}

The list item will have an image and a text. The image is added using the leading property. This property is configured to be the first item horizontally on the list and it precedes the title property which we used for the character’s title. We used the CachedNetworkImage package to load the image. When we run our app, we should see something like this:

Some more awesome resources!

Conclusion

In this article, we have been introduced to yet another cross-development platform - Flutter. We were able to evaluate reasons why Flutter is a good choice for developing mobile apps as against earlier released platforms. Some of the reasons we were able to unravel include better performance, its reactive nature, its material design implementation, etc.

We were equally able to build a simple demo app where we consumed an API to show off some awesome qualities of Flutter. Flutter has already produced some success stories. Feel free to play around with the GitHub repository. I can’t wait to see the next great thing you will build with this platform. Holla if you get stuck!