Neumorphism has been around for a while now and seemingly quite popular. It’s been a while since I last tried a design challenge, I was looking through dribbble and found this interesting design…

So lets make it (or very close to it)… TL;DR give me the code: https://github.com/tunitowen/Flutter-Dark-Neumorphism

Let’s ignore the header, it’s just text and and image. We’ll focus on the dial, and the cards at the bottom.

Dial

To breakdown the dial we have:
An inset circle, a raised inner circle, and a progress ring in between

Inset Circle

Flutter doesn’t have an inner shadow (that I could find…


The finished product

https://www.youtube.com/watch?v=FiJQdFeo8kk

It’s been a while since I did one of these. As a big F1 fan, when I saw this awesome Dribbble by Pontus Wellgraf, I had to try and make it in Flutter.

Imagery

The design calls for the driver to be half on screen, luckily the imagery on formula1.com has all the drivers centered. So the next step was to get them into a pager to nicely swipe.

Paging

At first I went for a PageView widget. This sort of worked, but gave me problems. The image needs to take up 2 screen widths to make sure the driver is…


Another Dribbble design I found here. This bottom bar concept, I think, looks good, and had a few subtle things going on that I thought might be fun to make in Flutter.

TL;DR .. here’s the code on GitHub.


A good way to get to grips with a framework, I think, is to try and make strange UI.

I found this playful password validation concept on Dribbble:

This design forces me to try and understand Flutter animations a bit more, as well as rotation, text input watching etc..

TL;DR … here’s the code on GitHub.

I set about this in a simplistic way.

Basics

I wanted to get the basics working first, so that was a simple Card with a list of 4 requirements. A TextField and a FlatButton .

Validation

Add a TextEditingController , add a Listener and compare…


Edit

Although this worked, it’s not a good implementation. After discussions on Reddit, it was suggested to use ShaderMask instead. I have now implemented this and published a plugin.

Feel free to look through the code for implementation

I work for a company, who have a small (read large) obsession for gradients. Including through text.

So, to Flutter:

A quick Google landed me in StackOverflow, and a straight answer.

final Shader linearGradient = LinearGradient(
colors: <Color>[Colors.pink, Colors.green],
).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0));
Text('Hello Gradients!',
style: new TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
foreground: Paint()..shader = linearGradient),
)

The only problem is that it…


I was given a design to prototype in Android at work. Circle images that snap to the centre, and zoom into place.

In Android a ViewPager with a whole host of libraries, or a RecyclerView will do the trick, but I was curious. How can Flutter handle it?

As you can see from the GIF above, it handles it just fine. But I did have to play for quite a while to get it there.

Lets start with the circle cards:

Card(
elevation: 4,
clipBehavior: Clip.antiAlias,
shape: CircleBorder(side: BorderSide(color: Colors.grey.shade200, width: 5)),
child: Image.asset(
"assets/your_image.png",
fit: BoxFit.cover,
),
)

It’s…


At Flutter Live, on Dec 4th. A company called 2dimensions demonstrated their product Flare. A web app to make animations. What’s more it could throw out a file that could then be directly used in a Flutter application.

The next day, I grabbed an SVG from flaticon and made a small animation. It worked just as advertised:

But, what I saw inside Flare intrigued me more. Multiple animations. So one flr file could could have 2,3,4+ animations inside. Each can be called from the Flutter widget.

I made a little animation, going from day to night and night to…


Flutter is great, but every so often you need to dip back into native code and display things that just aren’t possible inside Flutter. For example Google Maps (here’s hoping that gets resolved at some point).

Lets say you’ve written your app and you’ve used a custom font. Now you’re in Android / iOS in a native Activity / ViewController and you want to continue using the font.

Option One:

Add the font file in the standard platform ways, add the font file, link it up, use it. But then we’re shipping the same font twice for each platform. …


TL;DR .. IMO it’s great for an indie developer

First some background:
I’ve been developing Android and iOS apps for ~7 years. iOS has always been a hobby, whereas I’ve been a professional Android developer for ~5 years. I’ve always been anti cross platform, based on PhoneGap 🤮 and a brief play with React Native (not comparing the two).

Move forward to now:
I’ve been developing an app since January 2018, on and off. Which is now available, shameless plug:

It’s taken so long as I changed my mind many times, and had to write many Cloud Functions (my Node…


There are a selection of annotations available for use in Room Entity classes, here’s a brief explanation for some of them as I’ve been trying them out…

@Entity

@Entity
data class Person()

First of all, there’s the Entity annotation. Declaring the class as a Room Entity.

@Entity(tableName = "people")
data class Person()

Only a mad man would call a table person, surely it would be people. But the object should be person. Just specify the table name.

@Entity(indices = arrayOf(Index(value = "first_name", name = "name")))
data class Person()

If you want to index a column for faster searching of it, add…

Tony Owen

Flutter Fan Boy & Android Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store