Flutter: The Website Story

It is I Choudhry back at it with another project. Now, you might be thinking who needs a personal website in 2022, you shit-post on Twitter or post fake woke productivity captions with generic b-roll of overpriced apartments or the view out of one on Instagram and call it a day. You would be correct, but I built one anyway. choudhryamjad.com

Can we be serious, let's be serious. Content Creator's love having a website of links of their socials Linktr.ee, wlo.link, and the list goes on. Those websites charge for dumb things like custom background. Let's open our third eye and think about it.

We can easily build one ourselves and I'll tell you how I host mine and I haven't paid a dime yet.

First let's answer why I used Flutter over react for a web development project?

Flutter over React

Before ever playing with flutter I gave react a go. I thought I know a little typescript let's give this a shot and it wasn't fun.

Right off the bat it turned out I was meant to access the avatar state and have a revelation to add the template flag to use typescript.

npx create-react-app name-of-app --template typescript

Eventually I made a simple web app that would take and store emails and I wish I had a screenshot of it or something, but web development at the time wasn't my goal. It was just a throw away thing to try. So I didn't touch web dev again for years. I didn't like the mountain of boilerplate code either. So react can KISS my ass. That being said these days react doesn't seem that bad.

Made with Flutter

I'm going to touch on some of the points I found nice while working with Flutter, but this isn't a tutorial. You can find those on Youtube. This is more commentary.

Flutter involves one programming language, Dart, this is important to me as mostly a library, server, and systems developer that's what I'm use to. I don't want bits of xyz stringed together by abc. It's a nice language too, shout out to Lars Bak and Kasper Lund the designers. It's statically typed and you don't need to compile it every time to run as it's a interpreted compiler language. Hot reloads are SO NICE.

What's the architecture? Flutter development involves stateful/stateless widgets held together in widget trees. Like let's say you have text and you want to move it into the middle.

Center(
    child: Text(
      text,
      style: const TextStyle(
        fontSize: 15,
        fontWeight: FontWeight.bold,
        color: Color(0xff586e75),
      ),
    ),
  )

Woah That's some intuitive design no?

You want responsive design? No problem!

double screenWidth = MediaQuery.of(context).size.width;
 Flex(
      direction: screenWidth > 1100 ? Axis.horizontal : Axis.vertical,
)

slap a flex and and re-shffule around the components. Do you want to just have a different design for mobile and desktop?

  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth > 750) {
      return desktop(context, screenWidth);
    }
    return mobile(context, screenWidth);
  }
}

This might not be a great way to do it, but it's simple and it worked while I was just spit balling. When you get used to thinking in widgets, you become one with the widgets and can think of interesting approaches to problems.

const CircleAvatar(
          radius: 100.0,
          backgroundColor: Color(0xffb58900),
          child: CircleAvatar(
            radius: 95.0,
            backgroundImage: AssetImage("assets/images/avi.jpg"),
          ),
        ),

That's how I made the border around the picture on the home page. It's a circle inside a circle.

Just string together a bunch of widgets and even an idiot like me can put a decent looking responsive website together.

Deployment

I'll be the first to say deployment is hard, but the flutter + firebase ecosystem is nice. Run a couple commands and boom we in business baby I just followed the docs here and everything worked out.

It's been a couple days I haven't been charged a dime and looking at the amount of hits you need to get charged. I will never have to pay.

Final words

Give Flutter a try if you're looking for something new.

I'll end this by saying I started making these posts along side my random projects on a whim. My thought process was brain fart. I'll definitely make bigger and better projects whether the quality of these posts will... I'm not sure. Thanks for reading regardless!

Follow me on Twitter: @itsChoudhry