DEV Community: Abdulhadi Hashim

Cartoonate: Part 3 (Creating UI)

Abdulhadi Hashim — Thu, 07 Jan 2021 14:48:05 +0000

I decided to start by creating the UI and populating it with placeholder items to see how it looks before moving on to other things. I created # screens, a home screen, social media screen and and about page.

Home Screen:This is the page that asks users to input the image they want to convert to cartoon and video

Social Media: The page that shows what others have been able to create with the app.

about/profile: This page would give details about the app or show the user profile. I haven't decided what to do with this page for now.

a logout button was also added although it isn't functional yet.

The most difficult aspect for getting the bottom navigation animation to behave the way I wanted it to behave, thankfully, i found a package that does that, so i played with the code in the package a bit until i got the behaviour i wanted.

Here is the dart code that handles the animation and bottom navigation bar:

During testing, I made use of google Chrome as the test environment, final behaviour:

Cartoonate: Part 2(Setting Up)

Abdulhadi Hashim — Sun, 03 Jan 2021 11:50:48 +0000

As mentioned earlier, I am going to be making use of flutter and Visual Studio Code for development.

I followed the guidelines given on the flutter page for setting up to develop a web app:
Link

After setting up, i launched the web app to make sure everything was working well before i started writing any code.

Cartoonate: Part 1 (Introduction)

Abdulhadi Hashim — Fri, 01 Jan 2021 11:18:40 +0000

INTRODUCTION

Short form Videos have become very common, people are looking for entertainment in the shortest possible time and different variations of this can be seen across social media which includes: TikTok, Whatsapp Status, Instagram reels, etc.

PRODUCT

I am creating a web app that enables people to simply upload a pic of themselves and then the app converts the picture to a cartoon version and then brings it to like by mimicking a funny video, users would be allowed to select the art style of their choice, such as Pixar, Zombie, Family Guy, etc and then outputs the video which they can share on social media and download.Users would also be able to view what others created in the share page on the app.

TOOLS

The app would be built using the following:

flutter framework for web app
DigitalOcean for deployment using App platform, Storage.
Google Cloud Platform For animation AI, Database and User Authentication.
Github for Version Control.

NEXT

I would document all the processes and code used in creating the webApp. Join me in this journey!!