• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • My Hack20 Experience- CyberPunk Killer App – Flutter Hackathon 2020
      Cyberpunk Banner

      My Hack20 Experience- CyberPunk Killer App – Flutter Hackathon 2020

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date July 8, 2020
      • Comments 0 comment
      Spread the love

      On 27 June I participated in flutter hackathon 2020 also known as #Hack20. This was the first time I was participating in any hackathon and it was a new experience for me. What’s #Hack20? read it here

      CyberPunk Killer Demo

      Who Am I ?

      I am Shivam, 5 years experience working in Android and flutter development and share my experience as a professional, working as a Mobile Solution Architect at EnrichAI.com. I also work with Dart Web and GoLang for Server.

      Selecting project

      My first task was to select theme from the options to make a flutter project on it. The options given were

      Cyberpunk

      Saving the planet

      I selected cyberpunk theme as I am big a fan of game cyberpunk. So I choose to make project on that topic. The feature I was looking in flutter app was something interesting to make that I have not worked from a long time. I decided to make image filter app which cyberpunk theme based filters effect. And when I was done with filters feature within 48 hours I had some time left so I add another feature within the app to cyberpunk wallpapers.

      Wireframe

      Before creating a project you must decide what you are making i.e what will be the UI like where will be the images , button, text style, how page will be open and other basic user perspective based things to do. This will make your development path directed towards your app completion.

      Cyberpunk Wireframe

      Feature 1: Cyberpunk filters

      Cyberpunk Filters
      Cyberpunk Filters Screen

      A long time ago at the start of my career I made some image filters Android app on algorithm basis without using 3rd party library. The in it were like Grey effects, Sepia effect, Cartoon effect and some other filters, so I decided and challenge myself to make something filters better in flutter with cyberpunk theme. This includes effects like glitches, glitches overlay, Green background remover.

      Honestly 😅 I didn’t know at the start or how I will do it, so I start working on the algorithms first. If you want to know the basic of algorithm of these filters the code is available on my GitHub profile, or you can go to my YouTube section and comment if you want an explanation of these algorithms.

      This app contains only few ListView and PageView, rest was the complicated part i.e algorithm, applied with help of package for Image Pixels manipulation.

      import 'package:image/image.dart' as img;

      Feature 2: Wallpapers

      Cyberpunk_Wallpapers
      Cyberpunk_Wallpaper

      In Hackathon there was no restriction of usage of copyright content as the code will be Open Source so I have used actual images of cyberpunk wallpapers from Google search in this flutter app. This wallpaper change feature is only available on Android as iOS does not support this feature. Here I have used this package to set wallpaper from the online link of the images.

      wallpaper_manager: ^1.0.7

      Final Version

      Cyberpunk Filter Demo

      🤪 Also my project didn’t pass the Round 1 but still that’s OK ,why? is the competition was difficult? The answer is NO

      What I learned

      1. Participate in this #Hack20 flutter hackathon for learning and fun purpose only.
      2. Voting process was not equal for each project, as the minimum number of voting required for each person was 10/250. I still didn’t know how many projects, including mine, were awarded by all the members.
      3. You will learn from others who had made many great apps just like yours or better than yours.
      4. You will get the source code of all the projects in the #hack20 hackathon, so star it , fork it and read their codes. there is so much possibility what can be made within 48 hours in flutter apps.
      5. Learn collaboration with other developers.

      Source Code

      You can get the source code from my Github profile. Instructions are given to run this flutter code on your Android mobile.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:algorithms, flutter, flutter hackathon, Hack20, image filters

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      International Flutter Hackathon 2020 Hack20
      July 8, 2020

      Next post

      Google's Flutter 1.20 stable announced with new features
      August 7, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now