DEV Community: Obikwelu Chibuikem

Building a Flutter Crypto Trading App Final: Websockets

Obikwelu Chibuikem — Wed, 30 Nov 2022 18:44:05 +0000

Introduction

This article is a continuation of my previous article on building a crypto trading app. In this tutorial, we explored more features of syncfusion and took a dive into websockets in flutter.

For this article, I added a news service into the app for getting crypto related news headline
I also enabled searching for any cryptocurrency and view the chart data.
I added technical indicators from the syncfusion package.
finally I used web sockets to obtain real time data from the Binance websocket.

Note: This article is for instructional purpose only. No state management package was used for this tutorial. To follow along use the previous code we created

Brief about trading

In order to trade effectively, whether stocks, forex or crypto, most traders apply different techniques which could be

Fundamental analysis which includes news (high impact news) that can determine direction of market
Technical Analysis which are various analytical, statistical or mathematical principles translated into tools which could be used to determine direction of market. Such indicator includes MACD, EMA, Bollinger band, RSI etc. Syncfusion already provides us with some of the technical indicators we require. So we will write a function to make any indicator we want visible

Building the app

News Feature

We will be using the REST API from newsapi.org for this purpose. This because it curates cryptocurrency and blockchain related news from various sources. For this app we will be using only the headlines from the API but you can use other data provided by the API.

We will be using these extra packages

  web_socket_channel: ^2.2.0
  intl: ^0.17.0

Create our model file name it news.dart.

 import 'dart:convert';

CryptoNews cryptoNewsFromJson(String str) =>
    CryptoNews.fromJson(json.decode(str));

class CryptoNews {
  CryptoNews({
    this.status,
    this.totalResults,
    this.articles,
  });

  String? status;
  int? totalResults;
  List<Article>? articles;

  factory CryptoNews.fromJson(Map<String, dynamic> json) => CryptoNews(
        status: json["status"],
        totalResults: json["totalResults"],
        articles: List<Article>.from(
            json["articles"].map((x) => Article.fromJson(x))),
      );
}

class Article {
  Article({
    this.source,
    this.author,
    this.title,
    this.description,
    this.url,
    this.urlToImage,
    // this.publishedAt,
    this.content,
  });

  Source? source;
  String? author;
  String? title;
  String? description;
  String? url;
  String? urlToImage;
  // DateTime? publishedAt;
  String? content;

  factory Article.fromJson(Map<String, dynamic> json) => Article(
        source: Source.fromJson(json["source"]),
        author: json["author"] == null ? null : json["author"],
        title: json["title"],
        description: json["description"],
        url: json["url"],
        urlToImage: json["urlToImage"] == null ? null : json["urlToImage"],
        //  publishedAt: DateTime.parse(json["publishedAt"]),
        content: json["content"],
      );
}

class Source {
  Source({
    this.id,
    this.name,
  });

  String? id;
  String? name;

  factory Source.fromJson(Map<String, dynamic> json) => Source(
        id: json["id"] == null ? null : json["id"],
        name: json["name"],
      );
}

Then we write the function that will help us consume the data from the API

fetchNews() async {
  var datef = DateFormat.yMMMd();
  var date = datef.format(DateTime.now());

  String url =
      "https://newsapi.org/v2/everything?q=crypto&from=$date&sortBy=publishedAt&apiKey=44fff84f274244c9854593b49df128a3";

  Uri uri = Uri.parse(url);
  final response = await http.get(uri);

  final decodedRes = await json.decode(response.body);

  return CryptoNews.fromJson(decodedRes);
}

Then create a custom card (newscard.dart) widget for displaying the news headline

import 'package:cnj_charts/models/news.dart';
import 'package:flutter/material.dart';

class NewsCard extends StatelessWidget {
  Source? source;
  String? author;
  String? title;
  String? description;
  String? url;
  String? urlToImage;
  String? content;
  NewsCard({
    Key? key,
    this.source,
    this.author,
    this.title,
    this.description,
    this.url,
    this.urlToImage,
    this.content,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            width: 3,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Container(
                        height: 60,
                        width: 60,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              urlToImage.toString(),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            title.toString(),
                            style: const TextStyle(fontSize: 15),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Then create the newspage.dart screen for displaying our news headline.

import 'package:cnj_charts/models/news.dart';
import 'package:cnj_charts/services/api.dart';
import 'package:cnj_charts/widget/drawer.dart';
import 'package:cnj_charts/widget/newscard.dart';
import 'package:flutter/material.dart';

class NewsPage extends StatefulWidget {
  const NewsPage({super.key});

  @override
  State<NewsPage> createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  @override
  void initState() {
    fetchNews();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: const CryptoDrawer(),
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Crypto News'),
          backgroundColor: Colors.black,
        ),
        body: Container(
          color: Colors.black,
          child: FutureBuilder(
            future: fetchNews(),
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.waiting:
                  return const Center(
                    child: CircularProgressIndicator(
                      color: Colors.white,
                    ),
                  );
                default:
                  if (snapshot.hasError) {
                    return Center(
                      child: ElevatedButton(
                          onPressed: () {
                            snapshot.hasData;
                          },
                          child: const Text("No network connection")),
                    );
                  } else {
                    final news = snapshot.data as CryptoNews;
                    return ListView.builder(
                      itemCount: news.articles!.length,
                      itemBuilder: (BuildContext context, int index) {
                        var snap = news.articles![index];
                        return NewsCard(
                          urlToImage: snap.urlToImage,
                          title: snap.title,
                        );
                      },
                    );
                  }
              }
            },
          ),
        ));
  }
}

Search Feature and Technical indicator

In our drawer we create a search box that would enable us search for different coins. In the ListView add a Textfield Widget. Then pass in the controller and the onsubmitted function which basically

 TextField(
            onSubmitted: (value) {
              wickList = [];
              cryptoList = [];

              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (c) => SearchResult(
                    cryptocurrency: _controller.text.trim(),
                  ),
                ),
              );
            },
            controller: _controller,
            decoration: const InputDecoration(
              prefixIcon: Icon(Icons.search),
              hintText: "Enter coin name",
              fillColor: Colors.white,
              filled: true,
            ),
          ),

Then in the search result page, we create our trading chart view using the syncfusion SFCartesianChart widget which is similar to the code we wrote in the previous tutorial. Then we also enabled the technicla indicators bollinger band, RSI (Relative Strength Index) and the Simple Moving Average (SMA) indicator. Intl package is also used here to format the date.

Also we add a ListView.Builder which returns a detail conainer. The detail container widget displays real time information about the cryptocurrency via websockets.

import 'package:cnj_charts/models/candles.dart';
import 'package:cnj_charts/models/details.dart';
import 'package:cnj_charts/services/api.dart';
import 'package:cnj_charts/widget/detail_container.dart';
import 'package:cnj_charts/widget/drawer.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:http/http.dart' as http;

class SearchResult extends StatefulWidget {
  String cryptocurrency;
  SearchResult({Key? key, required this.cryptocurrency}) : super(key: key);

  @override
  State<SearchResult> createState() => _SearchResultState();
}

class _SearchResultState extends State<SearchResult> {
  bool bolisVisible = false;
  bool rsiisVisible = false;
  bool smaisVisible = false;
  late TrackballBehavior _trackballBehavior;
  late ZoomPanBehavior _zoomPanBehavior;
  late ChartSeriesController _chartSeriesController;
  trackerData() async {
    String apiEndpoint =
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${widget.cryptocurrency}";
    var url = Uri.parse(apiEndpoint);
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var res = response.body;

      cryptoList = cryptoTrackerFromJson(res);

      return cryptoList;
    } else {
      return null;
    }
  }

  @override
  void initState() {
    trackerData();

    fetchData(widget.cryptocurrency);

    _trackballBehavior = TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.doubleTap,
    );
    _zoomPanBehavior = ZoomPanBehavior(
      enablePinching: true,
      enableDoubleTapZooming: true,
      enableSelectionZooming: true,
      zoomMode: ZoomMode.x,
      enablePanning: true,
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        drawer: const CryptoDrawer(),
        appBar: AppBar(
          centerTitle: true,
          title: const Text('CodenJobs charts'),
          backgroundColor: Colors.black,
        ),
        body: Container(
          color: Colors.black,
          child: FutureBuilder(
            future: fetchData(widget.cryptocurrency),
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.waiting:
                  return SizedBox(
                    height: MediaQuery.of(context).size.height,
                    child: const Center(
                      child: CircularProgressIndicator(
                        color: Colors.white,
                      ),
                    ),
                  );
                default:
                  if (snapshot.hasData) {
                    return Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        ListView.builder(
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          itemCount: cryptoList.length,
                          itemBuilder: (context, index) {
                            if (cryptoList.isNotEmpty) {
                              var snap = cryptoList[index];
                              //  return Card();
                              return DetailContainer(
                                cryptocurrency: widget.cryptocurrency,
                                symbol: snap.symbol,
                                snap: snap,
                              );
                            } else {
                              return const Center(
                                child: Text('Check your network'),
                              );
                            }
                          },
                        ),
                        Expanded(
                          child: SfCartesianChart(
                            //  on: ,
                            enableAxisAnimation: true,
                            plotAreaBorderWidth: 1,
                            zoomPanBehavior: _zoomPanBehavior,
                            title: ChartTitle(
                              text:
                                  '${widget.cryptocurrency.toUpperCase()}/USDT',
                              textStyle: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                            trackballBehavior: _trackballBehavior,
                            indicators: <TechnicalIndicators<dynamic, dynamic>>[
                              BollingerBandIndicator<dynamic, dynamic>(
                                  seriesName: 'Charts',
                                  isVisible: bolisVisible),
                              RsiIndicator<dynamic, dynamic>(
                                seriesName: 'Charts',
                                isVisible: rsiisVisible,
                              ),
                              SmaIndicator<dynamic, dynamic>(
                                seriesName: 'Charts',
                                valueField: "close",
                                isVisible: smaisVisible,
                              )
                            ],
                            series: <CartesianSeries>[
                              CandleSeries<CandleItem, DateTime>(
                                name: "Charts",
                                dataSource: wickList,
                                xValueMapper: (CandleItem wick, _) {
                                  int x = int.parse(wick.time.toString());
                                  DateTime time =
                                      DateTime.fromMillisecondsSinceEpoch(x);
                                  return time;
                                },
                                lowValueMapper: (CandleItem wick, _) =>
                                    wick.low,
                                highValueMapper: (CandleItem wick, _) =>
                                    wick.high,
                                openValueMapper: (CandleItem wick, _) =>
                                    wick.open,
                                closeValueMapper: (CandleItem wick, _) =>
                                    wick.close,
                              )
                            ],
                            primaryXAxis: DateTimeAxis(
                                dateFormat: DateFormat.Md().add_Hm(),
                                visibleMinimum:
                                    DateTime.fromMillisecondsSinceEpoch(
                                        int.parse(wickList[0].time.toString())),
                                visibleMaximum:
                                    DateTime.fromMillisecondsSinceEpoch(
                                        int.parse(wickList[wickList.length - 1]
                                            .time
                                            .toString())),
                                intervalType: DateTimeIntervalType.auto,
                                minorGridLines: const MinorGridLines(width: 0),
                                majorGridLines: const MajorGridLines(width: 0),
                                edgeLabelPlacement: EdgeLabelPlacement.shift),
                            primaryYAxis: NumericAxis(
                              opposedPosition: true,
                              majorGridLines: const MajorGridLines(width: 0),
                              enableAutoIntervalOnZooming: true,
                            ),
                          ),
                        ),
                        const Text("Indicators"),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            ElevatedButton(
                              style:
                                  ElevatedButton.styleFrom(primary: Colors.red),
                              onPressed: () {
                                setState(() {
                                  bolisVisible = !bolisVisible;
                                });
                              },
                              child: const Text("Bollinger..."),
                            ),
                            ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                  primary: Colors.green),
                              onPressed: () {
                                setState(() {
                                  rsiisVisible = !rsiisVisible;
                                });
                              },
                              child: const Text("RSI (Relati.."),
                            ),
                            ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                primary: Colors.grey,
                              ),
                              onPressed: () {
                                setState(() {
                                  smaisVisible = !smaisVisible;
                                });
                              },
                              child: const Text("SMA (Simple..."),
                            ),
                          ],
                        ),
                      ],
                    );
                  } else {
                    return Center(
                      child: ElevatedButton(
                        onPressed: () {
                          setState(() {
                            snapshot.hasData;
                          });
                        },
                        child: const Text(
                            "Oops!!! no internet connection or data not found"),
                      ),
                    );
                  }
              }
            },
          ),
        ),
      ),
    );
  }
}

Realtime Data from Binance API via websockets

We create the dataStream() function for consuming data from the Binance websocket.

 dataStream() {
    final channel = IOWebSocketChannel.connect(
      "wss://stream.binance.com:9443/ws/${widget.symbol}usdt@ticker",
    );
    channel.stream.listen((message) {
      var getData = jsonDecode(message);
      setState(() {
        btcUsdtPrice = getData['c'];
        percent = getData['P'];
        volume = getData['v'];
        high = getData['h'];
        low = getData['l'];
      });
    });
  }

We initialize the datastream() function in the initState.

We then pass in thte specific data we require in the UI

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:web_socket_channel/io.dart';
import 'package:intl/intl.dart' as intl;

class DetailContainer extends StatefulWidget {
  String cryptocurrency;
  String symbol;
  var snap;

  DetailContainer({
    Key? key,
    required this.cryptocurrency,
    required this.symbol,
    this.snap,
  }) : super(key: key);

  @override
  State<DetailContainer> createState() => _DetailContainerState();
}

class _DetailContainerState extends State<DetailContainer> {
  String btcUsdtPrice = "0";
  String quantity = "0";
  String percent = "0";
  String volume = "0";
  String high = "0";
  String low = "0";

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

  dataStream() {
    final channel = IOWebSocketChannel.connect(
      "wss://stream.binance.com:9443/ws/${widget.symbol}usdt@ticker",
    );
    channel.stream.listen((message) {
      var getData = jsonDecode(message);
      setState(() {
        btcUsdtPrice = getData['c'];
        percent = getData['P'];
        volume = getData['v'];
        high = getData['h'];
        low = getData['l'];
      });
    });
  }

  @override
  void dispose() {
    dataStream();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.grey[800],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(20),
                          //
                        ),
                        height: 60,
                        width: 60,
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Image.network(widget.snap.image),
                        ),
                      ),
                    ),
                    Column(
                      children: [
                        const Text(
                          "Price",
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          "\$${intl.NumberFormat.decimalPattern().format(double.parse(btcUsdtPrice))}",
                          style: const TextStyle(
                              fontSize: 20, color: Colors.white),
                        ),
                      ],
                    )
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      children: [
                        const Text(
                          "Volume:",
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          intl.NumberFormat.decimalPattern()
                              .format(double.parse(volume)),
                          style: const TextStyle(
                              fontSize: 20, color: Colors.white),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        const Text(
                          "24hr high",
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          "\$${intl.NumberFormat.decimalPattern().format(double.parse(high))}",
                          style: const TextStyle(
                              fontSize: 20, color: Colors.white),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(
                  height: 4,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      children: [
                        const Text(
                          "Change percent",
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          "$percent%",
                          //   widget.snap.marketCap.toString(),
                          style: const TextStyle(
                              fontSize: 20, color: Colors.white),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        const Text(
                          "24hr low",
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          "\$${intl.NumberFormat.decimalPattern().format(double.parse(low))}",
                          style: const TextStyle(
                              fontSize: 20, color: Colors.white),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Voila we have our crypto trading app ready.

Final note: I addressed most of the issues we noted in part 1 of this series though I did not use any state management package. To make the app better you can use any state management of your choice to ensure that only the necesary part of your app are rebuilt especially when applying the technical indicator. Also, the trading chart can be made realtime using the Binance websocket API that returns candle data for different time frames. The syncfusion package we used has a method for handling realtime data. Since I discovered the Binance websocket API during the part 2 of this series I had to use it only for returning real time price, volume, change percent and 24hrs high and low

Download code: visit Codenjobs.com

Link to original article at CodenJobs

To know more about codenjobs click [CodenJobs]((https://www.codenjobs.com)



Want to Connect?

This article is originally published at codenjobs.com .

Building a Flutter Crypto Trading App: Part 1

Obikwelu Chibuikem — Sun, 06 Nov 2022 17:18:33 +0000

Introduction

Flutter enables us to build beautiful apps with great performance. One of the great thing about flutter is that it has cool packages and plugins that can enable us build most features we need in our applications hence eliminating the time needed to create the features from scratch.
In this article, we will be building a flutter trading app using CoinGecko API and Syncfusion in flutter.

Pre-requisite

In order to follow along with this article, you must have installed flutter and android studio and also setup the necessary environment which will enable you to run your flutter app. Also, you can use any IDE you like but I prefer VS code.

About the app

This is a flutter app that display trading candlesticks in charts which is siimilar to most trading platforms such as Metatrader 4, as well as other trading and exchange platforms etc. This article is the first in the series of two articles that we will address building a trading app in flutter. We will be using CoinGecko API to get our real time trading data and using syncfusion to display this data in charts in our flutter app.

COINGECKO

SYNCFUSION

Note: This article is for instructional purpose and will be refactored in later tutorials. No state management package was used for this tutorial.

Building the app

Let's name the app cnj_charts. In your command prompt run

flutter create cnj_charts

In the pubspec.yaml file add the following packages

  http: ^0.13.5
  syncfusion_flutter_charts: ^19.1.54

Checking out the API data, we will observe that it returns a list of list of data i.e a List of data containing list of chart data as seen below.

[
    [
        1667651400000, // time in Epoch milliseconds
        21379.78, // open
        21379.78, // high
        21329.8, // low
        21329.8 // close
    ],
    [
        1667653200000,
        21304.06,
        21328.06,
        21299.17,
        21299.17
    ]
]

Our folder structure is models, screens, services, widget
In the models folder, we create candle.dart

class CandleItem {
  final num? time;
  final num? open;
  final num? high;
  final num? low;
  final num? close;

  CandleItem({
    this.time,
    this.open,
    this.high,
    this.low,
    this.close,
  });
  factory CandleItem.fromJson(Map<String, dynamic> json) {
    return CandleItem(
      time: json['time'],
      open: json['open'],
      high: json['high'],
      low: json['low'],
      close: json['close'],
    );
  }
}

var candleList = [];
List<CandleItem> wickList = [];

Create api.dart file in the services folder

we create a function fetchData(String cryptocurrency) with argument cryptocurrency since we will be fetching different coin data from the API. on fetching this, we decode the response and pass the values of the decoded response which is a list to an empty list we created values. Then for each values[index], we add it to our candleList. Then create a list of name which holds the name of the data we received from our api and finally we use the Map.fromIterables function to map the name and candlesList this is the sample data we obtain

{
    "time": "1667651400000",
    "open": "21379.78",
    "high": "21379.78", 
    "low": "21329.8",
    "close": "21329.8"
}

Then we add the json data to our wickList.

import 'dart:convert';
import 'package:cnj_charts/models/candles.dart';
import 'package:http/http.dart' as http;

Future<dynamic> fetchData(String cryptocurrency) async {
  var url =
      "https://api.coingecko.com/api/v3/coins/$cryptocurrency/ohlc?vs_currency=usd&days=1";
  final uri = Uri.parse(url);
  final response = await http.get(uri);

  if (response.statusCode == 200) {
    List<dynamic> values = [];
    values = json.decode(response.body);
    if (values.isNotEmpty) {
      for (int i = 0; i < values.length; i++) {
        if (values[i] != null) {
          var map = values[i];
          candleList.add(map);
          List<String> name = ["time", "open", "high", "low", "close"];
          final json = Map<String, dynamic>.fromIterables(
            name,
            map,
          );
          wickList.add(CandleItem.fromJson(json));
        }
      }
      return wickList;
    } else {
      throw Exception('Failed to load data');
    }
  }
}

In our home.dart file, we create a scaffold with body is SfCartesianChart() widget which returns the chart. Then in the initState, enable trackball behaviour and zoompan behaviour

void initState() {
    fetchData(cryptocurrency);

    _trackballBehavior = TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.doubleTap,
    );
    _zoomPanBehavior = ZoomPanBehavior(
      enablePinching: true,
      enableDoubleTapZooming: true,
      enableSelectionZooming: true,
      zoomMode: ZoomMode.x,
      enablePanning: true,
    );

    super.initState();
  }

The values of the series is then passed to the corresponding data from the wick List.

series: <CandleSeries>[
                          CandleSeries<CandleItem, DateTime>(
                            dataSource: wickList,
                            xValueMapper: (CandleItem wick, _) {
                              int x = int.parse(wick.time.toString());
                              DateTime time =
                                  DateTime.fromMillisecondsSinceEpoch(x);
                              return time;
                            },
                            lowValueMapper: (CandleItem wick, _) => wick.low,
                            highValueMapper: (CandleItem wick, _) => wick.high,
                            openValueMapper: (CandleItem wick, _) => wick.open,
                            closeValueMapper: (CandleItem wick, _) =>
                                wick.close,
                          )
                        ],

We then define the x and y axis.

 primaryXAxis: DateTimeAxis(
                            visibleMinimum: DateTime.fromMillisecondsSinceEpoch(
                                int.parse(wickList[0].time.toString())),
                            visibleMaximum: DateTime.fromMillisecondsSinceEpoch(
                                int.parse(wickList[wickList.length - 1]
                                    .time
                                    .toString())),
                            intervalType: DateTimeIntervalType.auto,
                            minorGridLines: const MinorGridLines(width: 0),

                            // dateFormat: DateFormat.MMM(),
                            majorGridLines: const MajorGridLines(width: 0.5),
                            edgeLabelPlacement: EdgeLabelPlacement.shift),
                        primaryYAxis: NumericAxis(
                          opposedPosition: true,
                          majorGridLines: const MajorGridLines(width: 0),
                          enableAutoIntervalOnZooming: true,
                          // interval: 59,
                        ),

The complete code for the home screen

import 'package:cnj_charts/models/candles.dart';
import 'package:cnj_charts/services/api.dart';
import 'package:cnj_charts/widget/drawer.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String cryptocurrency = 'bitcoin';
  late TrackballBehavior _trackballBehavior;
  late ZoomPanBehavior _zoomPanBehavior;

  @override
  void initState() {
    fetchData(cryptocurrency);

    _trackballBehavior = TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.doubleTap,
    );
    _zoomPanBehavior = ZoomPanBehavior(
      enablePinching: true,
      enableDoubleTapZooming: true,
      enableSelectionZooming: true,
      zoomMode: ZoomMode.x,
      enablePanning: true,
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        drawer: const CryptoDrawer(),
        appBar: AppBar(
          centerTitle: true,
          title: const Text('CodenJobs charts'),
          backgroundColor: Colors.black,
        ),
        body: FutureBuilder(
            future: fetchData(cryptocurrency),
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.waiting:
                  return const Center(
                    child: CircularProgressIndicator(
                      color: Colors.black,
                    ),
                  );
                default:
                  if (snapshot.hasData) {
                    return Container(
                      color: Colors.white,
                      child: SfCartesianChart(
                        enableAxisAnimation: true,
                        plotAreaBorderWidth: 1,
                        zoomPanBehavior: _zoomPanBehavior,
                        title: ChartTitle(
                          text: 'BTC/USD',
                          textStyle:
                              const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        trackballBehavior: _trackballBehavior,
                        series: <CandleSeries>[
                          CandleSeries<CandleItem, DateTime>(
                            dataSource: wickList,
                            xValueMapper: (CandleItem wick, _) {
                              int x = int.parse(wick.time.toString());
                              DateTime time =
                                  DateTime.fromMillisecondsSinceEpoch(x);
                              return time;
                            },
                            lowValueMapper: (CandleItem wick, _) => wick.low,
                            highValueMapper: (CandleItem wick, _) => wick.high,
                            openValueMapper: (CandleItem wick, _) => wick.open,
                            closeValueMapper: (CandleItem wick, _) =>
                                wick.close,
                          )
                        ],
                        primaryXAxis: DateTimeAxis(
                            visibleMinimum: DateTime.fromMillisecondsSinceEpoch(
                                int.parse(wickList[0].time.toString())),
                            visibleMaximum: DateTime.fromMillisecondsSinceEpoch(
                                int.parse(wickList[wickList.length - 1]
                                    .time
                                    .toString())),
                            intervalType: DateTimeIntervalType.auto,
                            minorGridLines: const MinorGridLines(width: 0),

                            // dateFormat: DateFormat.MMM(),
                            majorGridLines: const MajorGridLines(width: 0.5),
                            edgeLabelPlacement: EdgeLabelPlacement.shift),
                        primaryYAxis: NumericAxis(
                          opposedPosition: true,
                          majorGridLines: const MajorGridLines(width: 0),
                          enableAutoIntervalOnZooming: true,
                          // interval: 59,
                        ),
                      ),
                    );
                  } else {
                    return Center(
                      child: ElevatedButton(
                        onPressed: () {
                          setState(() {
                            snapshot.hasData;
                          });
                        },
                        child: const Text("Oops!!! no internet connection"),
                      ),
                    );
                  }
              }
            }),
      ),
    );
  }
}

Also, we create our drawer.dart file in widget folder called Crypto drawer and which contains four listTiles which we can use to view the chart for each of the cryptocurrencies bitcoin, ethereum, solana and cardano.

import 'package:cnj_charts/models/candles.dart';
import 'package:cnj_charts/screens/cardano.dart';
import 'package:cnj_charts/screens/ethereum.dart';
import 'package:cnj_charts/screens/home.dart';
import 'package:cnj_charts/screens/solana.dart';
import 'package:flutter/material.dart';

class CryptoDrawer extends StatelessWidget {
  const CryptoDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      width: 200,
      backgroundColor: Colors.black,
      child: ListView(
        children: [
          ListTile(
            title: const Text(
              "BITCOIN/USD",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            onTap: () {
              wickList = [];
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (c) => const Home(),
                ),
              );
            },
          ),
          ListTile(
            title: const Text(
              "SOLANA/USD",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            onTap: () {
              wickList = [];
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (c) => const Solana(),
                ),
              );
            },
          ),
          ListTile(
            title: const Text(
              "ETHEREUM/USD",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            onTap: () {
              wickList = [];
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (c) => const Ethereum(),
                ),
              );
            },
          ),
          ListTile(
            title: const Text(
              "CARDANO/USD",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            onTap: () {
              wickList = [];
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (c) => const Cardano(),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

In the main.dart file add home screen as your home

import 'package:cnj_charts/screens/home.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const Home());
  }
}

In case you want to build an apk for using the app in release mode you have to include internet and network permissions in your AndroidManifest.xml file

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission  android:name="android.permission.ACCESS_NETWORK_STATE"  />

Finally, we have our app up and running.

Final note: We can refactor the code to return any coin chart data instead of returning screens of specific coins in the drawer. Also, incorporating a state management package will enable us better manage the state of the app especially if we plan on moving it to production. The Date could be better formatted using the intl package

Download code: Checkout the original article below to get GitHub link

Link to original article at CodenJobs

To know more about codenjobs click [CodenJobs]((https://www.codenjobs.com)



Want to Connect?

This article is also published at codenjobs.com .

Building a Crypto Price Tracker with Flutter

Obikwelu Chibuikem — Sun, 30 Oct 2022 16:33:58 +0000

Introduction

In this article, we will be building a crypto currency price tracker using flutter and Coingecko API. Flutter is google UI framework used to develop beautiful and high performance app.

Note: There are tons of other API similar to coingecko with similar JSON format such as coinmarket cap api, nomics api etc. I selected coingecko API because it does not require an API key so we can just dive straight into building our application.

Building the app

I will name the app price_tracker

flutter create price_tracker

Using JSON fomatter to fomat the api data, this is the forrmat of the http response we get from Coingecko api. This will enable us understand the data and decide how to consume the API

  {
    "id": "bitcoin",
    "symbol": "btc",
    "name": "Bitcoin",
    "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
    "current_price": 20745,
    "market_cap": 398249682812,
    "market_cap_rank": 1,
    "fully_diluted_valuation": 435734103282,
    "total_volume": 28619200860,
    "high_24h": 20939,
    "low_24h": 20662,
    "price_change_24h": -9.171288688139612,
    "price_change_percentage_24h": -0.04419,
    "market_cap_change_24h": 605958922,
    "market_cap_change_percentage_24h": 0.15239,
    "circulating_supply": 19193456,
    "total_supply": 21000000,
    "max_supply": 21000000,
    "ath": 69045,
    "ath_change_percentage": -69.94973,
    "ath_date": "2021-11-10T14:24:11.849Z",
    "atl": 67.81,
    "atl_change_percentage": 30497.91006,
    "atl_date": "2013-07-06T00:00:00.000Z",
    "roi": null,
    "last_updated": "2022-10-30T12:11:45.415Z"
  }

Then create a model class (CryptoTracker) for JSON deserialization of the http response body. Note use the num datatype for the currentPrice, marketCap and totalVolume because the values could be either int or double at any time. Theen create an empty list (cryptoList) which after decoding the response from our request, will pass the necessary data into the list.


import 'dart:convert';

List<dynamic> cryptoTrackerFromJson(String str) => List<CryptoTracker>.from(
    json.decode(str).map((x) => CryptoTracker.fromJson(x)));
var cryptoList = [];

class CryptoTracker {
  CryptoTracker({
    required this.id,
    required this.symbol,
    required this.name,
    required this.image,
    required this.currentPrice,
    required this.marketCap,
  });

  String id;
  String symbol;
  String name;
  String image;
  num currentPrice;
  num marketCap;

  factory CryptoTracker.fromJson(Map<String, dynamic> json) => CryptoTracker(
        id: json["id"],
        symbol: json["symbol"],
        name: json["name"],
        image: json["image"],
        currentPrice: json["current_price"],
        marketCap: json["market_cap"],
      );
}

Create the homepage and write the API services function (trackerData()). Then pass the response to the cryptoList (we created this previously in our model file).

 Future<List<dynamic>?> trackerData() async {
    String apiEndpoint =
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false";
    var url = Uri.parse(apiEndpoint);
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var res = response.body;
      cryptoList = cryptoTrackerFromJson(res);
      setState(() {
        cryptoList;
      });
      return cryptoList;
    } else {
      return null;
    }
  }

In the initState pass the trackerData()to make sure the function is initialised when the homepage is opened. Also add a Timer to run the function after 4 seconds; this is to get the updated JSON response from the Coingecko API automatically without refreshing the application.


  void initState() {
    trackerData();
    Timer.periodic(const Duration(seconds: 4), (timer) => trackerData());

    super.initState();
  }

Then create the rest of the body and add a refresh indicator to be able to refresh the app.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Crypto Price Tracker"),
          centerTitle: true,
          backgroundColor: Colors.black,
          elevation: 0.0,
          leading: const Icon(Icons.monetization_on_outlined),
        ),
        body: RefreshIndicator(
          onRefresh: trackerData,
          child: ListView.builder(
            itemCount: cryptoList.length,
            itemBuilder: (context, index) {
              if (cryptoList.isNotEmpty) {
                var snap = cryptoList[index];
                return CryptoCard(
                  name: snap.name,
                  symbol: snap.symbol,
                  image: snap.image,
                  currentPrice: snap.currentPrice.toDouble(),
                  marketCap: snap.marketCap.toDouble(),
                );
              } else {
                return const Center(
                  child: Text('Check your network,\n Pull to refresh'),
                );
              }
            },
          ),
        ));

Then create a custom crypto card widget which we pass into our home page to display the data recieved from the API.

import 'package:flutter/material.dart';

class CryptoCard extends StatelessWidget {
  CryptoCard({
    Key? key,
    required this.name,
    required this.symbol,
    required this.image,
    required this.currentPrice,
    required this.marketCap,
  }) : super(key: key);

  String name;
  String symbol;
  String image;
  double currentPrice;
  double marketCap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 15, left: 10, right: 10),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                      //
                    ),
                    height: 60,
                    width: 60,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Image.network(image),
                    ),
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          name,
                          style: TextStyle(
                            color: Colors.grey[900],
                            fontSize: 25,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Text(
                        symbol,
                        style: TextStyle(
                          color: Colors.grey[900],
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "\$${currentPrice.toDouble().toString()}",
                        style: TextStyle(
                          color: Colors.grey[900],
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                const Text(
                  "Market Cap: ",
                  style: TextStyle(
                    color: Colors.black54,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  "\$${marketCap.toDouble().toString()}",
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Voila we have our crypto price tracker ready.

Final note: The data returned by the API is bulky but we picked the ones we will be working with and built a model to assist in consuming only the data we require. If you are building a production ready application, consider using an API that will return data at a faster rate as the API we consumed updated price and other data at a much slower rate.

Download code:
GitHub Link

Link to original article at CodenJobs

To know more about codenjobs click [CodenJobs]((https://www.codenjobs.com)

Want to Connect?

This article is also published at codenjobs.com .

Opening links within our flutter app

Obikwelu Chibuikem — Wed, 15 Jun 2022 17:11:28 +0000

Subsequent to the previous post. Sometimes we might want our users to be able to interact with links in our app. You could decide to send the user to their default web browser app but in order to incrreas etime spent on your app, you could include in app url laucher. This is a kind of webview properties for links in your app.

Let's start

Create a new flutter project. I called mine launcher_app

flutter create launcher_app

Then open in any code editor of your choice.
Then add the url_launcher plugin

# This installs the latest version for us.
url_launcher:

Then in your AndroidManifest.xml file add this lines of code. The comments explains what each intent does.

<queries>
  <!-- If your app checks for https support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
   <!-- If your app checks for http support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="http" />
  </intent>
   <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
</queries>

Then in your Info.plist file add this lines of code.

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>https</string>
        <string>http</string>
        <string>sms</string>
        <string>tel</string>
    </array>

Then create your homescreen and import into main.dart

import 'package:flutter/material.dart';
import 'package:launcher_app/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Launcher App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const HomeScreen(),
    );
  }
}

Then create your homescreen and add three elevated buttons. The first to open a link. The second to make a call and the third to send a message.

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Codenjobs app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                String url = 'https://codenjobs.com/';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(parseUrl,
                      mode: LaunchMode.inAppWebView,
                      webViewConfiguration: const WebViewConfiguration(
                        enableJavaScript: true,
                      ));
                }
              },
              child: const Text('Open Link'),
            ),
            ElevatedButton(
              onPressed: () async {
                String url = 'tel:+233803458767';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(
                    parseUrl,
                  );
                }
              },
              child: const Text('make phone call'),
            ),
            ElevatedButton(
              onPressed: () async {
                String url = 'sms:+233803458767';
                final parseUrl = Uri.parse(url);

                if (await canLaunchUrl(parseUrl)) {
                  await launchUrl(
                    parseUrl,
                  );
                }
              },
              child: const Text('Send Message'),
            ),
          ],
        ),
      ),
    );
  }
}

The first button opens the codenjobs website link in an inappwebview and we enable javascript.

That's all for this article.
Originally posted at codenjobs.com

The you can get the source code at https://github.com/Obikwelu/launcher_app

Don't forget to follow me on codenjobs.
Codenjobs is a building an ecosystem in the blockchain and cryptocurrency space to allow developers secure more jobs. You can learn more about code&jobs here about page. If you're crypto savvy, you can read the whitepaper to know more and follow the project. To get latest update about code & jobs join their social media handle by clicking the links below.

[x] Telegram: https://t.me/codenjobs

[x] Twitter: https://twitter.com/codenjobs

[x] Discord: https://discord.gg/eWTXzPrsJ3

Converting any website into an app: Flutter webview

Obikwelu Chibuikem — Tue, 14 Jun 2022 15:21:32 +0000

Introduction

Mobile apps are really essential for online businesses. Most times businesses even though own websites still create apps that meet their customers need so as to stay relevant. Most of these apps are quite easy to access for the customers and if the onboarding process is well structured, conversion can be massive for these companies. Another reason why websites tend to make mobile app versions of their website is to increase ad revenues. The most pouplar app advertising service is Google Admob and with proper structuring, returns from ads can be masive

Let's say you have a website and you want to create an app version, the best way to do this as a developer would be to create an API (which we discussed about in our previous article) through which data can be exchanged between your mobile app and database(backend). Using this route makes your app more customizable but it requires you doing greater work. If on the other hand you're eager to create something and push it out to your users another way is to use webview to do this.

What is flutter Webview

Flutter webview allows us to display web pages in our apps. Also note that it does not act as a web browser. To learn more you can google search.

Prerequisite

In order to follow along with this tutorial you must have installed Flutter version 2.10 or higher, android studio and setup up the necessary environment to run your flutter app. You can use any IDE of your choice from Vscode, IntelliJ or android studio

Lets start

I will name the app web_to_app . Run the code in your terminal

flutter create web_to_app

If you are using Vscode as your IDE you can do the following to open up your folder quickly in visual studio code.

C:\app\app3>cd web_to_app

C:\app\app3\web_to_app>code .

Then we will add the webview_flutter plugin to our pubspec.yaml file.

webview_flutter: ^3.0.4

Then in the app folder in the build.gradle change the minimum sdk to 21. I ran into some issues with 19 and it took me awhile to resolve. So 21 is better, but you can try other SDK version but the minimum from documentation is 19.

 minSdkVersion 21

Then we create a home.dart file in our lib folder. Then create the homescreen this will be a stateful widget.

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
    );
  }
}

Then we import the home screen in our main.dart file.

import 'package:flutter/material.dart';
import 'package:web_to_app/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview app',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

In the homescreen, we add our webview as our scaffold body. we also pass in the controllers. we use late for our webviewcontroller because it wil be initialise later on in our app. Then we also create a floating action button. This wil be used to refresh our app.

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late WebViewController controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://www.codenjobs.com',
        onWebViewCreated: (controller) {
          this.controller = controller;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          controller.reload();
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

Then you can run your app.

Get the source code at https://github.com/Obikwelu/web_to_app

[x] Telegram: https://t.me/codenjobs

[x] Twitter: https://twitter.com/codenjobs

[x] Discord: https://discord.gg/eWTXzPrsJ3

Importance of stablecoins in global payment

Obikwelu Chibuikem — Mon, 06 Jun 2022 22:21:19 +0000

Cryptocurrencies are the true saviour of Fintech

We all know that wealth is not evenly distributed and so is skill and mastery. Most times companies & individuals go the length of crossing borders to source the best skills at affordable rate thanks to the web. Most times, when they have sourced the right skill and the project has been delivered, the problem of payment becomes another bottleneck in this value exchange.
Then comes cryptocurrencies the new form of digital currency to the rescue.

Before the advent of cryptocurrencies and the blockchain, using money within and across borders was cumbersome and expensive. This is due to the high transaction service fees charged by financial institutions. The rationale of these high charges is justifiable considering the fact that these transactions were processed by people and these institutions had inherent fees to pay such as employee salaries, light bills, taxes etc. Also, another problem with this banks and financial institutions is that since they require physical locations, there's bound to be uneven distribution of banking services. Let's face it the cost associated in running a bank in remote areas is expensive due to the volume of transactions when compared to their CAPEX and OPEX and even worse the ROI is extremely low. Hence creating a problem of unbanked and under-served population.

The world Financial Institution has faced a lot of revolution just like man. Most of this innovation is triggered by the need to solve problems encountered in the financial institution such as fragmented payment systems, fraudulent tansactions, expensive transaction fees, exchange rate variation, improper credit score, unbanked population etc. Most of the innovation in the financial institution is led by Fintech companies. Despite all these solutions, none has been as innovative and solution oriented as blockchain and cryptocurrencies because it solves the root cause of the inefficiencies in our financial system.

Stable coins are the true saviour of cryptocurrencies

Bitcoin and cryptocurrencies are highly volatile. One minute you're raking in massive and mind blowing gains another minute you're experiencing heavy losses which might make you lose all your investment portfolio or reduce it to relatively insignificant amount. These has been the one of the major barriers impeding it's wide spread adoption. The problem of volatility associated with these crypto tokens (both bitcoin and the altcoins) has been solved by the existence of stablecoins.

Stablecoins according to investopedia.com are cryptocurrencies the value of which is pegged, tied to that of another currency, commodity or financial instrument. With the web making the world a global village and facilitating exchange of services these stablecoins have become the easiest and safest payment token or digital currencies accept for services rendered.

Imagine you're a freelancer living in a remote or unbanked area with different bias and regulations as regards money and transactions and you successful complete a service/project for a client. When the time comes for payment, and you decide to stick to the normal fiat currency no matter the type, you will find it difficult to receive this money worse still if you find a traditional route of doing this, some percentage will be taken by charges and variation in exchange rates. To bypass this problems stablecoins are the go to cryptocurrencies or solutions. Stablecoins are devoid of bias and you have full control over your funds as well as the perks associated with cryptocurrencies with the removed disadvantage of the volatility. This removed disadvantage could also be a double edged sword since you also lose out on the massive gains as well. But if you're not keen on speculating and following fundamental news or technical analysis affecting the volatility of crypto tokens then it's better you stick to stablecoins.

Examples of popular Stable coins

Tether/USDT
USD Coin/USDC
Binance USD/BUSD
Dai/DAI
TrueUSD/TUSD

In conclusion

Blockchain, cryptocurrencies, Non-fungible tokens (NFTs) and Metaverse are here to stay. Investing in them require expertise or domain knowledge. Stable coins have changed the game in the crypto space and has helped the unbanked areas and populace get a fair reward for their services or products and have full control over their money without any barrier of any sort.

[x] Telegram: https://t.me/codenjobs

[x] Twitter: https://twitter.com/codenjobs

[x] Discord: https://discord.gg/eWTXzPrsJ3

[x] About Code and jobs

Flutter Network Request: Movie Info App

Obikwelu Chibuikem — Sun, 05 Jun 2022 15:02:51 +0000

Introduction

Building beautiful apps with minimum code is one of the best pros of using flutter framework. While making apps most times, we have to interact with data from a backend or database. One of the ways through which we interact with this data is through API.

What is an API

API is the acronym for Application Programming Interface. API allows data transmission between two software products. It also specifies the terms for this communication. Most mobile applications we use usually communicates with an API to deliver good user experience. Let's delve into the app.

Prerequisite

In order to follow along with this tutorial you must have installed Flutter version 2.10 or higher, android studio and setup up the necessary environment to run your flutter app.
I am using visual studio code as my IDE because it's light weight although you can use android studio or intelliJ IDE to write your codes. Just make sure you have Dart and Flutter plugin installed. For step by step instruction on how to install click on the link below depending on your operating system.

About the app

We are going to build an movie series app showing episodes and other useful data. The series is the popular flash series using an tvmaze api. We are using this API because it is free and open source and doesn't require any API key. To know more about this api click on any of the links below.

Note: At the end of building this app, we can change our TVmaze url endpoint and still get other movies app because they are all similar

Building the app

As mobile application developers, our main focus is to write well tested apps using best practices as quickly as possible. Most times writing apps requires searching on google, stackoverflow and other developer forums for existing solutions. Sometimes we even use online tools to speed up our app development process.

Lets start

I will name the app flash_app. Run the code in your terminal

flutter create flash_app

If you are using Vscode as your IDE you can do the following to open up your folder quickly in visual studio code.

C:\app\app2>cd flash_app

C:\app\app2\flash_app>code .

If you want to see how the JSON data looks like, click thisAPI endpoint which you show you the raw API data. You can copy all the JSON data, then click Json Formatter. Then paste the JSON file. This will help us understand the type of model we are to create and get general view of our data and decide which of the data we will use in the app.
To serialize our JSON data, there are lots of sites which can help us with this. But we will use this site by Javier Lecuona because it generates a very simple dart model for us. Although we are not using all the data returned.

Note: Serializing your JSON data determines how easy it is to interact with your API data. Making your JSON simple at this stage will help you work fast.

Applying the same folder structure we had in our quotes app create models, screens and services folders in the lib folder. No need to create assets folder for storing images because we will get them from network requests. Inside the models folder create a models.dart file. Copy your Generated dart and paste in the models.dart file. Then remove the necessary data. remove all the toJson Methods because we are only getting data from the API not posting. After formatting I have only the data left

class Flash {
  String? name;
  int? runtime;

  ModelImage? image;
  String? summary;
  Embedded? eEmbedded;

  Flash({
    this.name,
    this.runtime,
    this.image,
    this.summary,
    this.eEmbedded,
  });

  Flash.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    runtime = json['runtime'];
    image = json['image'] != null ? ModelImage.fromJson(json['image']) : null;
    summary = json['summary'];
    eEmbedded =
        json['_embedded'] != null ? Embedded.fromJson(json['_embedded']) : null;
  }
}

class ModelImage {
  String? medium;
  String? original;

  ModelImage({this.medium, this.original});

  ModelImage.fromJson(Map<String, dynamic> json) {
    medium = json['medium'];
    original = json['original'];
  }
}

class Embedded {
  List<Episodes>? episodes;

  Embedded({this.episodes});

  Embedded.fromJson(Map<String, dynamic> json) {
    if (json['episodes'] != null) {
      episodes = <Episodes>[];
      json['episodes'].forEach((v) {
        episodes!.add(Episodes.fromJson(v));
      });
    }
  }
}

class Episodes {
  String? name;
  int? season;
  int? number;
  int? runtime;
  ModelImage? image;
  String? summary;

  Episodes({
    this.name,
    this.season,
    this.number,
    this.runtime,
    this.image,
    this.summary,
  });

  Episodes.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    season = json["season"];
    number = json['number'];
    runtime = json['runtime'];
    image = json['image'] != null ? ModelImage.fromJson(json['image']) : null;
    summary = json['summary'];
  }
}

Then create our HomeScreen and add a scaffold

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

Then in our main.dart (which is the root of our application) file import the HomeScreen and add the HomeScreen in the home widget of MaterialApp widget. Also set the debugShowCheckedModeBanner to false.

import 'package:flash_app/screens/screens.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

Next we create our API serices in seervices.dart. We create a class with an asynchronous function which returns a Future of Flash?. Recall that ? this makes our datatype Nullable. For our API call we are using the http package. Go to pub.dev and search for http. Then copy the latest version to your pubspec.yaml file and run flutter pub get. ^0.13.4 is the latest version at the time of writing this article. Then import the http package in the sevices.dart file and use it to get data from the api and then decode the response and map the response to your model file. See code below

  http: ^0.13.4

import 'dart:convert';

import 'package:flash_app/models/models.dart';
import 'package:http/http.dart' as http;

class ApiServices {
  Future<Flash?> getMovies() async {
    var url = Uri.parse(
        "https://api.tvmaze.com/singlesearch/shows?q=flash&embed=episodes");
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var result = response.body;
      var decodedRes = jsonDecode(result);
      return Flash.fromJson(decodedRes);
    } else {
      return null;
    }
  }
}

Let's work on our home screen. Our HomeScreen is a stateful widget and we return a futurebuilder which takes the future we created in our APiServices class. Then we use the switch, case and default statement to check our connection to the state of our connection to the tvMaze api. if our connection is successful, our data is then displayed. If not an elevated button is passed in.

import 'package:flash_app/models/models.dart';
import 'package:flash_app/services/services.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: ApiServices().getMovies(),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return const Center(
              child: CircularProgressIndicator(),
            );
          default:
            if (snapshot.hasError) {
              return Center(
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text("Oops!!! no internet connection"),
                ),
              );
            } else {
              final series = snapshot.data as Flash;
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(series.image!.original.toString()),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: SingleChildScrollView(
                      child: Center(
                        child: Card(
                          elevation: 5,
                          margin: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 6),
                          color: Colors.transparent,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              const SizedBox(
                                height: 70,
                              ),
                              Text(
                                series.name.toString(),
                                style: const TextStyle(
                                  color: Colors.black,
                                  fontSize: 30,
                                  fontWeight: FontWeight.w900,
                                ),
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Text(
                                series.summary.toString(),
                                style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    fontWeight: FontWeight.w300),
                              ),
                              ElevatedButton(
                                onPressed: () {},
                                child: const Text('Episodes'),
                              )
                            ],
                          ),
                        ),
                      ),
                    )),
              );
            }
        }
      },
    );
  }
}

Then we create our next screen which is the episodes screen. This is to show us the list of episodes in Gridview format. It takes in three variables episodes, images and _context as shown in the cide below. When any gridview.builder item is tapped the summary() function is called whic returns a showdialog with summary of that episode.

import 'package:flash_app/models/models.dart';
import 'package:flutter/material.dart';

class EpisodesScreen extends StatelessWidget {
  final List<Episodes> episodes;
  final ModelImage images;
  late BuildContext _context;
  EpisodesScreen({
    Key? key,
    required this.episodes,
    required this.images,
  }) : super(key: key);
//Dialog for displaying summary
  summary(String? summary) {
    showDialog(
        context: _context,
        builder: (context) => Center(
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Card(
                  color: Colors.red.withOpacity(0.8),
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Text(
                      summary.toString(),
                      style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
              ),
            ));
  }

  @override
  Widget build(BuildContext context) {
    _context = context;
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text("Flash Episodes"),
        centerTitle: true,
        backgroundColor: const Color.fromARGB(158, 214, 22, 22),
        elevation: 0,
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(images.original.toString()),
            fit: BoxFit.cover,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1.0,
              ),
              itemCount: episodes.length,
              itemBuilder: (context, index) => InkWell(
                    onTap: () {
                      summary(episodes[index].summary);
                    },
                    child: Card(
                      child: Stack(
                        fit: StackFit.expand,
                        children: [
                          Image.network(
                            episodes[index].image!.original!,
                            fit: BoxFit.cover,
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Text(
                                  episodes[index].name!,
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                      fontSize: 15.0),
                                )
                              ],
                            ),
                          ),
                          Positioned(
                            top: 0.0,
                            left: 0.0,
                            child: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 10),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    color: Colors.black,
                                    child: Text(
                                      " Season ${episodes[index].season.toString()}",
                                      style: const TextStyle(
                                        color: Colors.white,
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    color: Colors.red,
                                    child: Text(
                                      " Episode ${episodes[index].number.toString()}",
                                      style: const TextStyle(
                                        color: Colors.white,
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  )),
        ),
      ),
    );
  }
}

Next we add Navigation from our home page to the episodes page and then add setstate(){} function for reloading our application. The final code for the home screen is

import 'package:flash_app/models/models.dart';
import 'package:flash_app/screens/episodes.dart';
import 'package:flash_app/services/services.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: ApiServices().getMovies(),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return const Center(
              child: CircularProgressIndicator(),
            );
          default:
            if (snapshot.hasError) {
              return Center(
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      snapshot.hasData;
                    });
                  },
                  child: const Text("Oops!!! no internet connection"),
                ),
              );
            } else {
              final series = snapshot.data as Flash;
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(series.image!.original.toString()),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: SingleChildScrollView(
                      child: Center(
                        child: Card(
                          elevation: 5,
                          margin: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 6),
                          color: Colors.transparent,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              const SizedBox(
                                height: 70,
                              ),
                              Text(
                                series.name.toString(),
                                style: const TextStyle(
                                  color: Colors.black,
                                  fontSize: 30,
                                  fontWeight: FontWeight.w900,
                                ),
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Text(
                                series.summary.toString(),
                                style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    fontWeight: FontWeight.w300),
                              ),
                              ElevatedButton(
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: ((context) => EpisodesScreen(
                                            episodes:
                                                series.eEmbedded!.episodes!,
                                            images: series.image!,
                                          )),
                                    ),
                                  );
                                },
                                child: const Text('Episodes'),
                              )
                            ],
                          ),
                        ),
                      ),
                    )),
              );
            }
        }
      },
    );
  }
}

Voila you can run your app and see your flash series app.

Summary

In this article we saw how to make simple network request with http.get as well as other interesting thing. One key thing to note about this app is that it can also be used for other TVmaze series just by changing the API movie title

"https://api.tvmaze.com/singlesearch/shows?q=flash&embed=episodes

you can change flash to any other movie included in the tvmaze API and get your app which is similar to what we did.

let's try changing the url of our Apiservices() class in services.dart with any of this url and run our app

https://api.tvmaze.com/singlesearch/shows?q=girls&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=orville&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=boys&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=24&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=superman&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=naruto&embed=episodes
https://api.tvmaze.com/singlesearch/shows?q=avatar&embed=episodes

see example here I changed to the naruto anime api endpoint

class ApiServices {
  Future<Flash?> getMovies() async {
    var url = Uri.parse(
        "https://api.tvmaze.com/singlesearch/shows?q=naruto&embed=episodes");
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var result = response.body;
      var decodedRes = jsonDecode(result);
      return Flash.fromJson(decodedRes);
    } else {
      return null;
    }
  }
}

Final note

So with this app tutorial you can create any series summary app using the tvmaze endpoint since they have similar json response format and hence similar models.
Depending on your time you can checkout Tv maze for all your favorite series and build an app for them you can share to me on codenjobs

In our next article you will see how to make request when there's an API key.
You can reach out to me to get the code and try to reproduce this app using other series in tvMaze and also follow me by clicking the link codenjobs. Stay tuned for more articles

Originally posted at codenjobs.com

Flutter app basics: Building a quotes app

Obikwelu Chibuikem — Fri, 03 Jun 2022 18:17:39 +0000

Introduction.

Flutter is a cross-platform app development framework developed by google used to build beautiful UI. The most exciting thing about flutter is that dart language which is it programming language is relatively easy to learn. It can be used to develop applications for 6 different platforms android, iOS, web, MacOS, Windows and Linux. So this series of articles serves as a building block for learning how to work with JSON data which is the most popular way in which most API return data.

Prerequisite

In order to follow along with this tutorial you must have installed Flutter version 2.10 or higher, android studio and setup up the necessary environment to run your flutter app. To get started you can read the flutter documentation. flutter. After installation run flutter doctor on your command prompt. To get a details of how to install flutter checkout the link
I am using visual studio code as my IDE because it's light weight although you can use android studio or intelliJ IDE to write your codes. Just make sure you have Dart and Flutter plugin installed. For step by step instruction on how to install click on the link below depending on your operating system

What we will explore

For this project we will learn how to build a simple quotes app. Things to learn.

folder management
working with models.
Simple UI.
Working with local JSON file.
Simple navigation

Lets start

The app will be named motivoapp. In your command prompt run

flutter create motivoapp

C:\app>flutter create motivoapp
Creating project motivoapp...
Running "flutter pub get" in motivoapp...                        2,607ms
Wrote 96 files.

All done!
In order to run your application, type:

  $ cd motivoapp
  $ flutter run

Your application code is in motivoapp\lib\main.dart.

Let's look at the type of json data we are going to work with.

 {
         "text":"As soon as beauty is sought not from religion and love, but for pleasure, it degrades the seeker.",
         "author":"Annie Dillard",
         "tag":"beauty"
      },

Next We create our folders. For this app I will create three folders in the lib folder and name them models, screens, services. This will help us organize our app better. Also we create an assets folder in the motivoapp folder to store our different assets like the images and json file we are using for this app.
Then we go to your pubspec.yaml file and declare our assets like this. The asset also contains images folder so we also declare this too.

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/
    - assets/images/

We have everything sorted and we are good to go.

In our screen folder we create a dart file named home.dart. Then we create a stateless widget and import material.dart package.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar());
  }
}

In our main.dart file we set our home as HomeScreen.

import 'package:flutter/material.dart';
import 'package:motivoapp/screens/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

Let's work on our model file. Since our data is already fixed I will use the required key word which makes our data non-nullable instead of the nullable datatypes. Also, the Quotes.fromJson helps us to Map our returned JSON data to our Quotes model. While the toJson() method is used while pushing data from our app to database or backend. But for this app we didn't use the toJson() method because of

Note: If a variable is not marked as required, we include the ?. The purpose of this ? is to make our datatype nullable incase our API or data source returns a null value. This is null safety. Also note String and String? are not of the same datatype. String? is a superset of String.

class Quotes {
  Quotes({
    required this.text,
    required this.author,
    required this.tag,
  });

  String text;
  String author;
  String tag;

  factory Quotes.fromJson(Map<String, dynamic> json) => Quotes(
        text: json["text"],
        author: json["author"],
        tag: json["tag"],
      );

  Map<String, dynamic> toJson() => {
        "text": text,
        "author": author,
        "tag": tag,
      };
}

Then we create a dart file called services.dart in our services folder. This is where we create our readJsonData() function to consume the data in our quotes.json. The function is of the type Future which returns a list of Quotes which is the class we created in our model. The variable jsondata helps us to load our file. The list variable helps us to decode our json file and returns it's values as List type. Finally we return our data and map the json keys to the variable we created in our quotes model class

import 'dart:convert';
import 'package:motivoapp/models/quotes.dart';
import 'package:flutter/services.dart';

Future<List<Quotes>> readJsonData() async {
  final jsondata = await rootBundle.loadString('assets/quotes.json');
  final list = json.decode(jsondata) as List<dynamic>;
  return list.map((e) => Quotes.fromJson(e)).toList();
}

Let get into the UI part. The Homescreen returns a futurebuildern widget which accepts the future readJsonData() we created in the services.dart file. The widget then returns a Listview of cards. We use Listview.builder because the number of data we want to display is unknown.

import 'package:flutter/material.dart';
import 'package:motivoapp/models/quotes.dart';
import 'package:motivoapp/screens/details.dart';
import 'package:motivoapp/services/services.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: readJsonData(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text("${snapshot.error}"));
          } else if (snapshot.hasData) {
            var items = snapshot.data as List<Quotes>;
            return ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Card(
                      elevation: 5,
                      margin: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 6),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Text(
                            items[index].text,
                            style:
                                const TextStyle(fontWeight: FontWeight.bold),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(items[index].author),
                              Text(items[index].tag)
                            ],
                          ),
                        ],
                      ),
                    ),
                  );
                });
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        });
  }
}

To display a single quote in a details page we create another screen Details.dart which is a stateful widget. This accepts three variables text, author and tag. We also add a container which will hold our background image. The MediaQuery.of(context).size (.height or .width) gets the entire screen size (height or width) of the device running the app hence making it default responsive. Also adding the singlechildscrollview widget makes the screen scrollable and prevent render overflow error.

import 'package:flutter/material.dart';

class Details extends StatefulWidget {
  final String text, author, tag;
  const Details({
    required this.text,
    required this.author,
    required this.tag,
    Key? key,
  }) : super(key: key);

  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          backgroundColor: Colors.black,
        ),
        body: Center(
          child: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/bg.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(25.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Center(
                      child: Text(
                        widget.text,
                        style: const TextStyle(
                            fontSize: 30,
                            wordSpacing: 2,
                            letterSpacing: 2,
                            fontWeight: FontWeight.w900,
                            color: Colors.white),
                      ),
                    ),
                    const SizedBox(height: 50),
                    Text(
                      widget.author,
                      style: const TextStyle(
                          fontSize: 30,
                          wordSpacing: 2,
                          letterSpacing: 5,
                          fontWeight: FontWeight.w400,
                          color: Colors.white),
                    ),
                    const SizedBox(height: 50),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

we wrap our card with an inkwell widget to make it respond to click events also wrap the listview.builder with container which will hold our background image

import 'package:flutter/material.dart';
import 'package:motivoapp/models/quotes.dart';
import 'package:motivoapp/screens/details.dart';
import 'package:motivoapp/services/services.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: readJsonData(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text("${snapshot.error}"));
          } else if (snapshot.hasData) {
            var items = snapshot.data as List<Quotes>;
            return Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/bg.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: ListView.builder(
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return InkWell(
                      onTap: (() {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: ((context) => Details(
                                  text: items[index].text,
                                  author: items[index].author,
                                  tag: items[index].tag,
                                )),
                          ),
                        );
                      }),
                      child: Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Card(
                          elevation: 5,
                          margin: const EdgeInsets.symmetric(
                              horizontal: 10, vertical: 6),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Text(
                                items[index].text,
                                style: const TextStyle(
                                    fontWeight: FontWeight.bold),
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(items[index].author),
                                  Text(items[index].tag)
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  }),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        });
  }
}

Voila we have our quotes app ready

This is our final folder structure

This is our simple quotes app.

Final Thoughts

Working with models in flutter is essential. This article is a building block on how to create dart models. There are online tools that can help generate your models based on the Json file you have, but basic knowledge of how they are created will help you better understand how any model works.
In my next article we will cover working with network requests to get data from an API.

This article is originally posted at Code&Jobs website https://www.codenjobs.com/.

The link to the blog post is at Flutter app basics: Building a quotes app

DEV Community: Obikwelu Chibuikem

Building a Flutter Crypto Trading App Final: Websockets

Introduction

Brief about trading

Building the app

News Feature

Search Feature and Technical indicator

Realtime Data from Binance API via websockets

Building a Flutter Crypto Trading App: Part 1

Introduction

Pre-requisite

About the app

Building the app

Building a Crypto Price Tracker with Flutter

Introduction

Building the app

Opening links within our flutter app

Let's start

Converting any website into an app: Flutter webview

Introduction

What is flutter Webview

Prerequisite

Lets start I will name the app web_to_app . Run the code in your terminal flutter create web_to_app

Importance of stablecoins in global payment

Cryptocurrencies are the true saviour of Fintech

Stable coins are the true saviour of cryptocurrencies

Examples of popular Stable coins

In conclusion

Flutter Network Request: Movie Info App

Introduction

What is an API

Prerequisite

About the app

Building the app

Lets start I will name the app flash_app. Run the code in your terminal flutter create flash_app

Summary

Final note

Flutter app basics: Building a quotes app

Introduction.

Prerequisite

What we will explore

Lets start

This is our final folder structure

Final Thoughts

Lets start

I will name the `app web_to_app` . Run the code in your terminal

`flutter create web_to_app`

Lets start

I will name the app flash_app. Run the code in your terminal

`flutter create flash_app`