Affirmations with Flutter

Affirmations with flutter

It had been a while since I (subconsciously or not so subconsciously) pivoted my career from app development to data science. Man, I did not miss Android Studio clogging my base model laptop’s memory. However, my little cousin (who just ventured into app development) wanted help with one of the issues he was having. But, as someone who had not used semicolons and braces for almost couple of years, Dart was almost nauseating upon first glance. I promised him I would get around answering his queries, but after I built something simple first.

Affirmations.dev provides quotes that are motivating to the devs. So, as a newbie in Flutter, it good to get all the positive reinforcement especially when Android Studio and the virtual device doesn’t leave much space for many Stackoverflow tabs.

Few examples of what affirmations.dev returns:

// 20200927192236
// https://www.affirmations.dev/

{
  "affirmation": "Your life is already a miracle of chance waiting for you to shape its destiny"
}



// 20200927194030
// https://www.affirmations.dev/

{
  "affirmation": "It is not a sprint, it is a marathon. One step at a time"
}


// 20200927194048
// https://www.affirmations.dev/

{
  "affirmation": "You are learning valuable lessons from yourself every day"
}

Complete App

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class AffirmationsModel{
  final String affirmation;
  AffirmationsModel({this.affirmation});

  factory AffirmationsModel.fromJson(final json){
    return AffirmationsModel(
      affirmation : json["affirmation"]
    );
  }
}

Future<AffirmationsModel> fetchAffirmations() async {
  final response = await http.get('https://www.affirmations.dev/');
  if (response.statusCode == 200) {
    final jsonAffirmations = jsonDecode(response.body);
    return AffirmationsModel.fromJson(jsonAffirmations);
  } else {
    throw Exception('Failed');
  }
}

void main() {
  runApp(AffirmationsApp());
}

class AffirmationsApp extends StatefulWidget {
  AffirmationsApp({Key key}) : super(key: key);

  @override
  _AffirmationsAppState createState() {
    return _AffirmationsAppState();
  }
}

class _AffirmationsAppState extends State<AffirmationsApp> {
  Future<AffirmationsModel> _futureAffirmationsModel;

  @override
  void initState() {
    super.initState();
    _futureAffirmationsModel = fetchAffirmations();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Affirmations',
      theme: ThemeData(
        primarySwatch: Colors.pink,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor: Colors.deepPurpleAccent,
          appBar: AppBar(
            title: Text('Affirmations'),
            centerTitle: true,
          ),
          body: Column(children: <Widget>[
            Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.lightBlueAccent,
              ),
              // width: 300,
              height: 300,
              padding: EdgeInsets.all(20.0),
              margin: EdgeInsets.all(80.0),
              child: FutureBuilder<AffirmationsModel>(
                future: _futureAffirmationsModel,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done &&
                      snapshot.hasData) {
                    return Text(snapshot.data.affirmation,
                        textAlign: TextAlign.center,
                        textScaleFactor: 1.4,
                        style: TextStyle(color: Colors.white));
                  } else if (snapshot.hasError) {
                    return Text("${snapshot.error}");
                  }
                  return CircularProgressIndicator();
                },
              ),
            ),
            Divider(),
            Container(
              child: RaisedButton(
                onPressed: () {
                  setState(() {
                    _futureAffirmationsModel = fetchAffirmations();
                  });
                },
                textColor: Colors.white,
                padding: const EdgeInsets.all(0.0),
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: <Color>[
                        Color(0xEEFF1461),
                        Color(0xDDFF1483),
                        Color(0xFFFF1493),
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.all(30.0),
                  child:
                  const Text('INSPIRE ME', style: TextStyle(fontSize: 15)),
                ),
              ),
            )
          ])),
    );
  }
}