DEV Community

Abdulhadi Hashim
Abdulhadi Hashim

Posted on

Cartoonate: Part 3 (Creating UI)

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:

Screenshot 2021-01-07 at 15.44.09

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

ezgif.com-gif-maker

Top comments (0)