DEV Community: Robert Brunhage 💙

I made and launched a SAAS product in 43 days

Robert Brunhage 💙 — Thu, 24 Jun 2021 14:28:54 +0000

Building a SaaS product in just 43 days have been a lot of fun, so let's deep dive in to it!

This was originally posted over at robertbrunhage.com you can also find me over on Twitter!

And just to be transparent, here is the first commit and the launch tweet of krossa.io

And yes, I regret not having a cool first commit...

The Problem

This is actually something I made together with Tadas Petra and both of us are content creators mostly focused on YouTube. Though we had an issue which was that we wanted to both move in a bit to the blogging space.

One issue with starting a blog is getting traffic, now both of us could drive a bit of traffic from our YouTube channels but we thought that this wasn't enough, so we started doing something called "crossposting".

Crossposting is when you take your original blog post let's say this one which is published at robertbrunhage.com, and publish it to other platforms as well, such as Medium, DevTo and Hashnode. The reason for this is that you can drive traffic from those platforms over to your website! I personally did this with adding a small message at the top or bottom saying something like "This was originally posted at ...".

But just this simple thing of crossposting your blog could take A LOT of time. For my first blog I did this with, took over an hour which, let's be honest here... I wanted to spend on other things 😅 (Playing games and wasting time).

Building a Solution

So we started researching about crossposting more on how to do it effectively which in the end mostly cut the time from a bit over an hour per post to about an hour. To us, these were no solutions.

We thought about the idea of a platform that would do everything for you and this is the flow we came up with.

Write your blogpost or import it
Select the platforms
Publish (either to draft or directly)

Now a lot of things had to be done behind the scenes such as

Formatting the blog to look good on each platform.
Make sure the canonical url would be set (makes sure the search engine is fine with multiple copies of the post).
A GREAT editor to write in.

The Tech Stack

TLDR of the stack

Next.js
Typescript
Firebase (Storage, Functions, Firestore)

The reason we went this route was that we had some requirements that made us go with Next.js such as being able to have a blog on the website and both of us prefer a typed language which TypeScript helped with!

Now in my opinion the one that helped us create krossa.io in such a short amount of time is Firebase. There were so many things handled for us right of the bat, such as

Subscription with Stripe.
Our previous knowledge of it.
Function to delete user data when the user wants to delete their account.

Summary

We launched krossa.io in 43 days and we believe it will help A LOT of bloggers find their audience.

The problem was that crossposting took too much time and this was our solution for a platform:

Write your blogpost or import it
Select the platforms
Publish

TLDR of the stack

Next.js
Typescript
Firebase (Storage, Functions, Firestore)

If you found this interesting and you are a blogger or thinking about becoming one,consider krossa.io as even this was posted from it 😎

Follow me on Twitter and you can find the original blog post at robertbrunhage.com

Flutter Crash Course - Build a Net Worth Application

Robert Brunhage 💙 — Wed, 09 Jun 2021 10:27:07 +0000

To get started is most of the time the most daunting task so let's do it together, this is what we will build!

I also have a competition for this one with a total of $175 in Amazon gift cards so make sure to check the video to learn more about that!

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

The basics

First of we have to first understand two basic concepts which are StatelessWidget and StatefulWidget and I think the most simple way to explain it is to think of a StatelessWidget will just display data and StatefulWidget will display data but with it, it's also possible to update and display new data. In the case of Flutter, we have something called a Widget Tree where these will be used.

And example could be that you have a parent widget which is Stateful and a child widget which is Stateless. In the case where you tell the Stateful one to rebuild the child/children will also rebuild. So always start with a StatelessWidget and convert it to Stateful when you find the need for it.

Set up the basics

IMPORTANT: I expect that you have installed Flutter already as this really won't go through the installation steps.

This is how we will start out with the project, we will remove the typical counter application and replace it with pretty much nothing, take a look.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Let's go over this quickly. First I've added the services import, and you can ignore this for now but we will use that to force the user to only be able to input digits from the keyboard later on.

Right now we have the entry point with is main this one sets up our first widget which in this case is called MyApp as we are using the Material theming we will use a MaterialApp, in this we can override the theme which we will do soon.

Our HomePage is very simple as well and you may notice that this one is actually a StatefulWidget the reason for this is because I want it to manage the "asset amount" and the "liabilities amount". That way, when these change all the children will rebuild and show the new values as well.

Let's go ahead and add some theming, this will just make it a bit easier as I won't have to for example set the background color for every new page that we show and so on.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Color(0xff222747),
        textSelectionTheme: TextSelectionThemeData(
          cursorColor: Colors.grey.shade800,
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            padding: EdgeInsets.symmetric(horizontal: 56, vertical: 16),
          ),
        ),
        cardTheme: CardTheme(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        ),
        cardColor: Color(0xff444968),
      ),
      home: HomePage(),
    );
  }
}

Start Building

Let's start by making the cards on the main screen, to do this we need to first build out the layout. Now there are multiple widgets to decide how widgets should be layed out such as Column, Row, ListView and so on. We are mostly going to stack out things vertically so in this case it's widgets like Column and ListView that will be our friends.

Now notice that I may not make everything perfect here and the reason for this is because I want YOU to download this repo, improve on it and learn. There are many, many ways to do the same thing and you will understand it better by testing it out.

class _HomePageState extends State<HomePage> {
  // These two will hold the values that we will change later
  var assetAmount = 0;
  var liabilitiesAmount = 0;

  // The method that is responsible for setting the Asset variable as well as updating the UI.
  void setAssetAmount(int asset) {
    setState(() {
      assetAmount = asset;
    });
  }

  // The method that is responsible for setting the Liabilities variable as well as updating the UI.
  void setLiabilitiesAmount(int liabilities) {
    setState(() {
      liabilitiesAmount = liabilities;
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Center(
            child: Column(
              children: [
                SizedBox(height: 48),
                Text(
                  'Add your assets and liabilities',
                  style: theme.textTheme.headline5,
                ),
                SizedBox(height: 102),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

As you can see here we have done some very basic building blocks and I will comment the code to make it simpler to understand, but we will see a lot of widgets we have no idea on what they are doing...

Just to throw it out there, you will be confused in the beginning, there are a lot of widgets for a lot of things but over time you will understand and it will feel like second nature!

I will give a quick overview here on what the widgets are and what they do:

Scaffold: Implements the basic Material design layout, with things like AppBar, Body, BottomNavigationBar etc.
SafeArea: The children will not be hidden behing things like the statusbar.
SingleChildScrollView: A scrollable widget that will take only 1 child.
Center: Will center a widget
Column: A layout widget that will stack items vertically, we use the center widget to force this to take the entire width.
SizedBox: a simple box.
Text: The widget that lets us have text.

We are going to use these to pretty much build everything here so let's see what we can do...

Below the last SizedBox we will add the following

AmountCard(
  title: 'Assets',
  amount: assetAmount,
  onTap: () => showDialog(
  context: context,
  builder: (context) {
   return NumberInputDialog(
    onTap: setAssetAmount,
    title: 'Assets',
    amount: assetAmount,
   );
  },
 ),
),
SizedBox(height: 16),
AmountCard(
 title: 'Liabilities',
 amount: liabilitiesAmount,
 onTap: () => showDialog(
  context: context,
  builder: (context) {
   return NumberInputDialog(
    onTap: setLiabilitiesAmount,
    title: 'Liabilities',
    amount: liabilitiesAmount,
   );
  },
 ),
),
SizedBox(height: 102),
ElevatedButton(
  style: ElevatedButton.styleFrom(
   primary: Colors.white,
  ),
  onPressed: () {},
 ),
 child: Text(
  'Calculate',
  style: theme.textTheme.button!.copyWith(
   color: Colors.grey.shade800,
   fontWeight: FontWeight.bold,
  ),
 ),
),

Now the application won't work ad we need 2 main things that we are missing which are the AmountCard as well as the NumberInputDialog. Let's head over to the next section and build those two!

Building your own widgets

You may have noticed already and that is that there are A LOT of widgets. Now this is both powerful and daunting for sure, so lets tackle building our own ones.

Let's start with the AmountCard

class AmountCard extends StatelessWidget {
  const AmountCard({
    Key? key,
    required this.title,
    required this.amount,
    this.onTap,
  }) : super(key: key);

  final String title;
  final int amount;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      height: 148,
      width: size.width * 0.8,
      child: Card(
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(8),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(title, style: Theme.of(context).textTheme.bodyText1),
              SizedBox(height: 4),
              Text(amount.toString(), style: Theme.of(context).textTheme.headline6),
            ],
          ),
        ),
      ),
    );
  }
}

As you can see this is just a StatelessWidget that takes some argument in the constructor. in the build method we decide how this widget will look and behave!

Now as much as I would love to go over every single widget, that will take a bit of extra time so I urge you to look at the documentation for all of the widgets that you don't understand over on the widget catalog.

One thing I may note here is that we use this weird thing: final size = MediaQuery.of(context).size;. This is to access the size of our device, that way we can set sizes for widgets depending on the size of the device, which is SUPER powerful!

Let us now build the NumberInputDialog

class NumberInputDialog extends StatefulWidget {
  const NumberInputDialog({
    Key? key,
    required this.onTap,
    required this.title,
    required this.amount,
  }) : super(key: key);

  final Function(int) onTap;
  final String title;
  final int amount;

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

class _NumberInputDialogState extends State<NumberInputDialog> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.amount == 0 ? '' : widget.amount.toString());
  }

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

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final outlineInputBorder = OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey.shade600, width: 1),
    );

    return Dialog(
      backgroundColor: Colors.white,
      child: Container(
        padding: EdgeInsets.all(20),
        width: screenSize.width * 0.7,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              widget.title,
              style: Theme.of(context).accentTextTheme.headline6?.copyWith(color: Colors.grey.shade800),
            ),
            SizedBox(height: 24),
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              style: TextStyle(color: Colors.grey.shade900),
              autofocus: true,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                labelStyle: TextStyle(color: Colors.grey.shade600),
                focusedBorder: outlineInputBorder,
                enabledBorder: outlineInputBorder,
                labelText: 'Write amount',
              ),
            ),
            SizedBox(height: 24),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Theme.of(context).cardColor,
                padding: EdgeInsets.symmetric(horizontal: 56),
              ),
              onPressed: () {
                widget.onTap(int.parse(_controller.text));
                Navigator.of(context).pop();
              },
              child: Text(
                'Done',
                style: Theme.of(context).textTheme.button!.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Now this one is a bit tricky as a lot of the code here is basically just designing and making it look nice, the most important part here is that the first widget is a Dialog in the build method. The reason for this is because we are showing this widget with a showDialog method. This just handles a lot of things for us such as making the background a dark tint and so on.

Another thing we do is setting up something called a TextEditingController, this is so that we can get the text value to be used when we click the Done button. One important part here is the InitState and Dispose.

Short explaination of these two:
InitState: Called when the widget is inserted to the tree, so right before the build method is called, it will call this only ONCE.
Dispose: Called when the widget is removed from the tree permantently. Make sure to dispose things that needs it here to avoid memory leaks.

With all this implemented you should be able to click on cards, add values and that will be displayed in the app, so on to showing the net worth page with an animation!

Building the net worth page

The UI will be VERY simple here as we will only show a text in the middle of the screen with the net worth value passed from the previous screen. The majority of code comes from setting up an animation so let's take a look!

class NetworthPage extends StatefulWidget {
  const NetworthPage({
    Key? key,
    required this.amount,
  }) : super(key: key);

  final amount;

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

class _NetworthPageState extends State<NetworthPage> with SingleTickerProviderStateMixin {
  // This will be responsible for driving the animation and the vsync comes from our SingleTickerProviderStateMixin.
  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1500),
  );

  // We create a animation object to customize our animation, this is done in initState.
  late final Animation<int> _animation;

  @override
  void initState() {
    super.initState();
        // With IntTween we can set a begin and end value as well as adding a CurvedAnimation.
    _animation = IntTween(begin: 0, end: widget.amount).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );

    // Here we start the animation.
    _animationController.forward();
  }

  @override
  void dispose() {
      // Dispose it so we don't get memory leaks.
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ValueListenableBuilder<int>(
              valueListenable: _animation,
              builder: (context, value, child) {
                return Text(
                  'Your total net worth is $value',
                  style: Theme.of(context).textTheme.headline5,
                  textAlign: TextAlign.center,
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

As you can see I also added some comments to break it down a bit, but in essence we start an animation that will animate from 0 to our net worth value. In the build method we listen to this animation with a ValueListnableBuilder which will rebuild everytime the animation changes. With this approach we don't have to call setState over and over again to actually see anything!

So now we only need to push to this page when we are in the HomePage which is quite simple. Here is the button we used and I've gone a head and added the code for actually navigating.

ElevatedButton(
    style: ElevatedButton.styleFrom(
        primary: Colors.white,
    ),
    onPressed: () => Navigator.of(context).push(
        MaterialPageRoute(
            builder: (context) => NetworthPage(amount: assetAmount - liabilitiesAmount),
            fullscreenDialog: true,
        ),
    ),
    child: Text(
        'Calculate',
        style: theme.textTheme.button!.copyWith(
            color: Colors.grey.shade800,
            fontWeight: FontWeight.bold,
        ),
    ),
),

In the OnPressed call we call the Navigator to push a new page. Using the MaterialPageRoute we can define what page we want to push as well as if we want it to be a fullScreenDialog or not, in this case I want that as it makes a bit more sense in this case, but you can leave it out if you want.

It will push to the NetworthPage with the assetAmmount - liabilitiesAmount which will sum up to the net worth!

There we have it, if you want to take a look at the full code, you can find it over on GitHub

You can also find a PDF with Flutter tips if you sign up on robertbrunhage.com!

Summary

By just using the basics we can come up with quite cool apps and my real goal for you is to check out the code, improve on it or just build something similar! The best way to learn is to build something 😊

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

Vim 10x Developer in Flutter

Robert Brunhage 💙 — Fri, 14 May 2021 06:06:25 +0000

I have been on and off using neovim for Flutter development, switching between VSCode and neovim (in the terminal). I have finally gotten to a stage where I feel like I can be just as productive but also never touch the mouse during coding..

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

My setup

We start with the mindset that we have already installed neovim, if you haven't, I recommend going to neovim.io and installing that! After that is done you should now be able to create/edit a file called init.vim. This file will host all configuration for your vim experience!

Now when we have the basic things located we can really get in to it!

Installing a plugin manager

So if you are used to VSCode you have probably installed extensions before. Well a plugin manager such as plug lets us do just that! I personally use the one mentioned but there are tons of different ones so just pick one you prefer or go with the one I use.

Follow the instructions to install and then start editing in the init.vim file with nvim init.vim we can start by doing the following:

call plug#begin('~/AppData/Local/nvim/plugged')
" Inside here we add our plugins
call plug#end()

Now when we have our plugin manager installed and ready we can start installing the extensions (plugins)!

Installing some plugins

With plug there are one main command we need to know when installing plugins which is PlugInstall.

Here is a list of plugins that should be able to get you started with Flutter development in neovim!

call plug#begin('~/AppData/Local/nvim/plugged')

" File and folder management
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'junegunn/fzf.vim'
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'preservim/nerdtree'
Plug 'tiagofumo/vim-nerdtree-syntax-highlight'

" Snippets
Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'
Plug 'natebosch/dartlang-snippets'

" Language support
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'jiangmiao/auto-pairs'

" Dart
Plug 'dart-lang/dart-vim-plugin'

" Git
Plug 'vim-airline/vim-airline'

" Theme
Plug 'morhetz/gruvbox'
call plug#end()

When these are added go ahead and write :PlugInstall: which will start downloading and installing the plugins.

We are not 100% done

There are a few more things except for just adding some keybinds and that is installing some coc-extensions. This is a plugin we added earlier which will handle the different programming languages (in simple terms). For example when we add the following in our init.vim we should have Flutter support!

"coc config
let g:coc_global_extensions = [
  \ 'coc-snippets',
  \ 'coc-flutter',
  \ ]

Now when we source the file and reopen those extensions should be installed!

Some personal setup

Now comes the fun part, which is setting up the config as you want it! With the previous setup that was shown, you should be able to do everything BUT it's a bit of a pain writing all the commands we need to be able to do. For example to open the explorer on the right side for the file we need to write :NERDTreeToggle.

As I was used to using VSCode a lot I personally set some of the keybinds to be similar as VSCode. One example of this is to open NERDTree which I now do with CTRL+b. Below you can find my config which should hopefully make it a bit easier!

call plug#begin('~/AppData/Local/nvim/plugged')

" File and folder management
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'junegunn/fzf.vim'
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'preservim/nerdtree'
Plug 'tiagofumo/vim-nerdtree-syntax-highlight'

" Snippets
Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'
Plug 'natebosch/dartlang-snippets'

" Language support
Plug 'tpope/vim-projectionist'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'jiangmiao/auto-pairs'

" Dart
Plug 'dart-lang/dart-vim-plugin'

" Git
Plug 'tpope/vim-fugitive'
Plug 'vim-airline/vim-airline'

" Theme
Plug 'morhetz/gruvbox'
call plug#end()

colorscheme gruvbox

set noerrorbells                                              " Don't add sounds for errors
set number
set nowrap
set nohlsearch
set smartcase
set noswapfile
set nobackup
set undodir=~/AppData/Local/nvim-data/backup
set undofile
set incsearch
set tabstop=2
set softtabstop=0 noexpandtab
set shiftwidth=2
set colorcolumn=120
set clipboard=unnamedplus
set backspace=indent,eol,start
highlight ColorColumn ctermbg=0 guibg=lightgrey

let mapleader=" "
nnoremap <leader>fe :CocCommand flutter.emulators <CR>
nnoremap <leader>fd :below new output:///flutter-dev <CR>
map <leader>h :wincmd h <CR>
map <leader>j :wincmd j <CR>
map <leader>k :wincmd k <CR>
map <leader>l :wincmd l <CR>

nnoremap <C-b> :NERDTreeToggle<CR>

let g:dart_format_on_save = 1
let g:dartfmt_options = ['--fix', '--line-length 120']

" Coc
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

" Symbol renaming.
nmap <leader>rn <Plug>(coc-rename)

" Use K to show documentation in preview window
nnoremap <silent> K :call <SID>show_documentation()<CR>
function! s:show_documentation()
  if (index(['vim','help'], &filetype) >= 0)
    execute 'h '.expand('<cword>')
  elseif (coc#rpc#ready())
    call CocActionAsync('doHover')
  else
    execute '!' . &keywordprg . " " . expand('<cword>')
  endif
endfunction

nmap <C-P> :FZF<CR>

nmap <leader>gs :G<CR>
nmap <leader>gh :diffget //2<CR>
nmap <leader>gl :diffget //3<CR>

imap <tab> <Plug>(coc-snippets-expand)
let g:UltiSnipsExpandTrigger = '<Nop>'
let g:coc_snippet_next = '<TAB>'
let g:coc_snippet_prev = '<S-TAB>'

" Use <c-space> to trigger completion.
if has('nvim')
  inoremap <silent><expr> <c-space> coc#refresh()
else
  inoremap <silent><expr> <c-@> coc#refresh()
endif

" Applying codeAction to the selected region.
" Example: `<leader>aap` for current paragraph
xmap <leader>a <Plug>(coc-codeaction-selected)
nmap <leader>a <Plug>(coc-codeaction-selected)

"coc config
let g:coc_global_extensions = [
  \ 'coc-flutter',
  \ 'coc-snippets',
  \ 'coc-yaml',
  \ ]

let g:NERDTreeGitStatusWithFlags = 1

Remember, these are all personall (I removed all TS configs). but should get you a good starting point!

Summary

I have started doing all my development with the keyboard and it's hard to explain but I have to say the feeling is AMAZING. There is nothing really more for me to say here except to if you are interested, just try it out. It's a lot to get used to and not close to the plug and play you get with a IDE. BUT you will get the 10x developer bragging rights 😉

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

Flutter Web Opinions & Why I Choose Next

Robert Brunhage 💙 — Mon, 10 May 2021 07:51:04 +0000

There are 6 topics that I consider when choosing a framework for my web projects and I will go over them and the reason why my personal website robertbrunhage.com is using NextJs.

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

Performance

This is the first topic and arguably the most important one for me. Here are two examples regarding performance for my personal website and a website app I built in Flutter 10 months ago.

First we have the nextjs site which performance is outstanding and has a initial startup time in bad scenarios of 1.4 seconds.

The next image shows a Flutter website that was built 10 months ago that has a initial startup time in bad scenarios of 11 seconds.

So the points here goes easily to NextJs

SEO

I don't think this one needs that much to talk about as NextJs has a primary focus of being outstanding in SEO. In this case Flutter haven't had much focus at all on SEO, which the issue here shows.

This is why the second points will go to NextJS.

Feel

The feel is what I refer to regarding how the site feel when I use it on different devices. This one is very subjective but also very important.

For example

Do you like the feel on Mobile
Do you like the feel on Tablet
Do you like the feel on Desktop

In this case NextJs will win in pretty much all the scenarios but in my opinion regarding the mobile and sometimes even Tablet version of web, Flutter can get away quite smoothly as it really works best on touch devices. So even though this may not be for everyone here I will personally give both NextJs and Flutter a point!

Requirements

So this one is very focused on what type the project is but I will give an example using my personal site which has the support of showing blogposts hosted in the project itself. Meaning I utilize SSR to show blogposts such as maybe the one you are reading now!

The PRO about this thing is that the performance of loading and displaying that blogpost to the user is really fast and this type of usage is not possible without SSR support (which Flutter doesn't have). This is why NextJs will get a point here.

Time

This one is also rather interesting as time can play a huge role in which tech we choose. For example let's say that it's very important for some unknown reason to make a website to accompany your application ASAP and in this scenario your project doesn't have to do many changes to comply with this. Now Flutter is actually a very interesting framework as you can with not much work just publish your app to support the web.

So honestly I will give a point to Flutter here as time sometimes can play this role, and most of the time you will be pretty satisfied with the end result.

Knowledge

Now this one will be a determine factor for many developers as you may already be a Flutter Pro and you don't want to pick up a new technology just to get a simple web version of your application. So here the point will go to Flutter for its smooth crossplatform functionality.

Now just to be clear. I don't encurage building a website in Flutter for the sole reason that, that is what your knowledge allows. I will always encourage that if you need to build a website, find the framework or tech that will help you the most and in that case learn that if it's better suitet for the task!

Scores

Now with all that we have the following scores.

NextJs - 4 points
Flutter - 3 points

Summary

Depending on the different topics such as the ones mentioned above is the way I pick a framework. In the cases I describe gave an edge to NextJs which is the reason I've gone with that!

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

Create Your Own Twitter App in Flutter

Robert Brunhage 💙 — Wed, 21 Apr 2021 17:51:34 +0000

Twitter is one of the biggest social media platforms, and in this blog we are going to go over how we can make our own app that will utalize the Twitter API to make our own tweets.

You can follow me on twitter: @robertbrunhage

This article was originally posted at robertbrunhage.com

Initial Setup

Get your API tokens from developer.twitter.com
Create a Flutter Project

We are going to depend on 5 different packages, make sure to use the latest versions.

dart_twitter_api: any
dartz: any
flutter_hooks: any
hooks_riverpod: any
http: any

Setting up the environment_config.dart

This will be responsible to pass the API key's we got from the Twitter Developer portal to our Repository.

import 'package:hooks_riverpod/hooks_riverpod.dart';

class EnvironmentConfig {
  // We add the api key by running 'flutter run --dart-define=apiKey=MYKEY`
  final apiKey = const String.fromEnvironment("apiKey");
  final apiKeySecret = const String.fromEnvironment("apiKeySecret");
  final accessToken = const String.fromEnvironment("accessToken");
  final accessTokenSecret = const String.fromEnvironment("accessTokenSecret");
}

final environmentConfigProvider = Provider<EnvironmentConfig>((ref) {
  return EnvironmentConfig();
});

If you are completely new to this I recommend another video regarding --dart-define

twitter_repository.dart

This class will be responsible to make the actual requests to the Twitter API. In this case it will make a request for adding a tweet on our profile. One note here is that we do a couple of things and I will add comments to the code to make it more clear.

import 'dart:io';

import 'package:dart_twitter_api/twitter_api.dart';
import 'package:flutter_twitter_api/environment_config.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:dartz/dartz.dart';
import 'package:http/http.dart';

// Here we provide the TwitterApi that we got from the Package we added in the beginning
final twitterApiProvider = Provider<TwitterApi>((ref) {
  final config = ref.watch(environmentConfigProvider);
  print(config.apiKey);
  print(config.apiKeySecret);
  print(config.accessToken);
  print(config.accessTokenSecret);

  final twitterApi = TwitterApi(
    client: TwitterClient(
      consumerKey: config.apiKey,
      consumerSecret: config.apiKeySecret,
      token: config.accessToken,
      secret: config.accessTokenSecret,
    ),
  );

  return twitterApi;
});

// Providing our Repository to later on be accessible to the Controller (the class that the UI will use)
final twitterRepositoryProvider = Provider<TwitterRepository>((ref) {
  final twitterApi = ref.watch(twitterApiProvider);

  return TwitterRepository(twitterApi);
});

class TwitterRepository {
  TwitterRepository(this._twitterApi);
  final TwitterApi _twitterApi;

  Future<Either<Failure, String>> post(String status) async {
    try {
      Tweet tweet = await _twitterApi.tweetService.update(status: status);
      return Right(tweet.fullText);
    } on Response catch (response) {
      return Left(Failure(response.reasonPhrase));
    } on SocketException catch (_) {
      return Left(Failure('No internect connection'));
    }
  }
}

// This class doesn't have to be in this file but done so to make it simpler in this example. 
// We are going to use this to have our custom failure making our error decoupled and easier to manage.
class Failure {
  Failure(this.message);

  final String message;
}

twitter_controller.dart

The controller will be responsible of making the requests to the repository coming from the UI. It will make use of StateNotifier and also AsyncValue where the latter one makes it easy to handle the three different states of loading, data and error.

We first provide the Controller so it is accessible to the UI (here you can also see that we watch the repository so the controller can access it). Our method just as in the repository uses the Either type so depending on our different states can return different results. We use this later in the UI so that we can clear the TextEditingController only if we actually have success when we post the actual tweet.

import 'package:dartz/dartz.dart';
import 'package:flutter_twitter_api/twitter_repository.dart';
import 'package:hooks_riverpod/all.dart';

final twitterControllerProvider = StateNotifierProvider<TwitterController>((ref) {
  final twitterRepository = ref.watch(twitterRepositoryProvider);

  return TwitterController(twitterRepository);
});

class TwitterController extends StateNotifier<AsyncValue<String>> {
  TwitterController(
    this._twitterRepository, [
    AsyncValue<String> state,
  ]) : super(state ?? AsyncValue.data(''));
  final TwitterRepository _twitterRepository;

  Future<Either<Failure, String>> postTweet(String tweetMessage) async {
    state = AsyncValue.loading();
    final result = await _twitterRepository.post(tweetMessage);

    result.fold(
      (failure) => state = AsyncValue.error(failure),
      (message) => state = AsyncValue.data(message),
    );

    return result;
  }
}

main.dart

The UI is pretty standard the only thing taking note here is that we have to wrap MyApp with a ProviderScope so that Riverpod actually works.

The other thing is that in the MyhHomePage we are actually using a HookWidget instead of a normal Stateless or Stateful widget. The reason for this is because we get access to things that will make it more readable and easier to manage IMO, such as the TextEditingController (We don't have to dispose it etc).

The TweetResponse makes use of the AsyncValue<String> coming from our controller and uses the when keyword to display the appropriate state!

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'twitter_controller.dart';
import 'twitter_repository.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

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

// We are using a HookWidget
class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // The hook will make sure to dispose the TextEditingController and other nice things.
    final textEditingController = useTextEditingController();

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Container(
            color: const Color(0xffE9EFFD),
            padding: const EdgeInsets.only(top: kToolbarHeight),
            child: Align(
              alignment: Alignment.topCenter,
              child: Text(
                'Calm tweeter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(12.0),
            margin: const EdgeInsets.only(top: kToolbarHeight * 2),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(42),
                topRight: Radius.circular(42),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Spacer(),
                TweetResponse(),
                Spacer(),
                CustomInputField(
                  onPressed: () => postTweet(context, textEditingController),
                  textEditingController: textEditingController,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void postTweet(BuildContext context, TextEditingController tweetTextEditingController) async {
    // We add a early guard clause
    if (tweetTextEditingController.text.isEmpty) return;

    // Make the request and if it works we will clear the Input field, if not the input field will not be cleared.
    final result = await context.read(twitterControllerProvider).postTweet(tweetTextEditingController.text);
    if (result.isRight()) {
      tweetTextEditingController.clear();
    }
  }
}

class CustomInputField extends StatelessWidget {
  const CustomInputField({
    Key key,
    @required this.textEditingController,
    @required this.onPressed,
  }) : super(key: key);

  final TextEditingController textEditingController;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
      keyboardType: TextInputType.multiline,
      minLines: 1,
      maxLines: 4,
      maxLength: 280,
      maxLengthEnforced: true,
      decoration: InputDecoration(
        hintText: 'How are you all doing?',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide.none,
        ),
        suffixIcon: ClipOval(
          child: Material(
            color: Colors.white.withOpacity(0.0),
            child: IconButton(
              onPressed: onPressed,
              icon: Icon(Icons.send),
            ),
          ),
        ),
        filled: true,
        fillColor: const Color(0xffF6F8FD),
      ),
    );
  }
}

class TweetResponse extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final tweetControllerState = useProvider(twitterControllerProvider.state);
    final theme = Theme.of(context).textTheme.headline6.copyWith(color: const Color(0xff2F3A5D));
    return tweetControllerState.when(
      data: (data) => Text(data.isEmpty ? 'Write a tweet 😊' : 'Tweet: $data', style: theme),
      loading: () => CircularProgressIndicator(),
      error: (err, sr) {
        if (err is Failure) {
          return Text(err.message, style: theme);
        }
        return Text('An unexpected error occurred 😢', style: theme);
      },
    );
  }
}

Summary

Not much is needed to get the basic functionality, and utilizing the packages mentioned in the top is a great way to make the whole thing easier!

You can follow me on twitter: @robertbrunhage

This article was originally posted at robertbrunhage.com

10 Flutter Tips I Learned After 3 Years of Flutter Development

Robert Brunhage 💙 — Fri, 09 Apr 2021 11:58:17 +0000

Here are some of the tips and tricks I discovered over my three years of making Flutter applications and content. I am positive that they will improve your workflow if you don't already know about them.

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com

1. Use a Lot of Packages

This may seem counterintuitive, but for a lot of people, just being done with a project is the first step so that you get actual users testing out your application. Over time, when the application is published and you are getting feedback, that is when you should look over the packages and replace them with your own code to have more control.

You can find all the packages over at Pub.dev.

2. Utilize Snippets

A while back, I only used the provided snippets for things like StatelessWidget, but when you actually make custom snippets for tasks you do over and over again, you will save a ton of time! I will show an example of snippets. These originally came from FilledStacks and I have been using them ever since!

If you are using VSCode, you can just hit F1, search for "Snippets," and you should find the "Configure user snippets." Add a file to your liking and the snippet code of your choice. Below is my testing snippet:

{
  "Main Test Suite Setup": {
        "prefix": "testm",
        "body": [
            "import 'package:flutter_test/flutter_test.dart';",
            "",
            "void main() {",
            " group('${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}} -', (){",
            "",
            " });",
            "}"
        ],
        "description": "Main Test Suite Setup"
    },
    "Test Group Setup": {
        "prefix": "testg",
        "description": "Creates a Test group with a test",
        "body": [
            "group('${1} -', () {",
            " test('${2}', () {",
            "",
            " });",
            "});",
        ]
    },
    "Single Test Setup": {
        "prefix": "tests",
        "description": "Creates a single test",
        "body": [
            " test('${1}', () {",
            "",
            " });",
        ]
    },
}

3. Use Linting Early

There are a bunch of different ways to set up linting, but I would just recommend setting up the lint package, which is super easy!

Add the package to your pubspec.yaml file.
Create a analysis_options.yaml file.
Add the include line described in the package.
Profit?

4. Use the Tooling

You probably already do this, but it will make it easier to follow the next tip. By using the tooling, you will simplify a lot in your life. Extract Widget is probably my favorite - and for good reason.

5. Multiple Private Widgets

Now this one can be controversial, but my approach for keeping code clean and easy to navigate is very simple. Let's say we have a big widget with a lot of nesting. Well, go ahead and try to take a piece out of that by using Extract Widget. Make it private by prefixing with an underscore as well as a good name. What you have done now is effectively just moved the code below the public version of that widget and everything has just become a lot easier to read and change. You don't need to try to figure out what that specific Container is for, as it now has a good name!

6. App Icon and Splash Screen

These two packages are huge time-savers for your projects: Flutter launcher icons and Flutter Native Splash. I recommend checking them out. They have great documentation on how to get started, which has saved an incredible amount of time.

7. Null Aware Operators

There are a bunch of different null aware operators such as ??, ??=, and more. Learning them will not only make your code cleaner and easier now, but it will also simplify a lot when null safety becomes stable in Flutter.

8. Reuse x.of(context)

As you know, when you want to use theming in Flutter, you need to write things like Theme.of(context).textTheme.bodyText1. That is fine, but if you have to do it multiple times in the same widget, I recommend moving it to the top of the build method. You can do that easily by just copying the line I wrote and putting it in a variable like this: final theme = Theme.of(context).textTheme. Now every time you need the theme, you would just write theme.bodyText1 in your widget.

9. debugPrint

Sometimes we just need more information when we are debugging - especially for network requests. So instead of using a normal print(myNetworkData), you can use debugPrint(myNetworkData). This will yield a lot more metadata for you in case you need it!

10. Single-Responsibility Widget

If you know about the SOLID principles, then this may already sound very familiar. Well, that is because it is. With "single-responsibility," we mean that a widget is only supposed to do one thing.
Do not make mega widgets that do a bunch of different things. For example, if you noticed that you have a widget containing other widgets that make up your custom button, break that out! Extract it and make it its own separate widget. This will make it a lot more manageable and you will now know that that specific widget's only rule is to serve and handle that button.

Conclusion
The ten tips in this article are taken from my YouTube video in which I share what I have learned from my experience developing apps in Flutter.
Thanks for reading!

You can follow me on twitter: @robertbrunhage
This article was originally posted at robertbrunhage.com