|
1 | | -# flutter_uis |
| 1 | +# Flutter UI Designs |
2 | 2 |
|
3 | | -A new Flutter project. |
| 3 | +## Features |
4 | 4 |
|
5 | | -## Getting Started |
| 5 | +<dl> |
| 6 | + <dt>UI Scaling</dt> |
| 7 | + <dd>Scales UI on any size of device wether it be tablet, small screen mobile, phablet or desktop screen.</dd> |
6 | 8 |
|
7 | | -This project is a starting point for a Flutter application. |
| 9 | + <dt>True Cross Platform</dt> |
| 10 | + <dd>Just download the <a href="#downloads">app</a> from for your OS and run it without installing any dependencies.</dd> |
8 | 11 |
|
9 | | -A few resources to get you started if this is your first Flutter project: |
| 12 | + <dt>Offline-first</dt> |
| 13 | + <dd>Run app without an internet connection. All assets are saved locally.</dd> |
| 14 | + |
| 15 | + <dt>Simple UI</dt> |
| 16 | + <dd>Just simple and straight forward UI.</dd> |
10 | 17 |
|
11 | | -- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) |
12 | | -- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook) |
| 18 | + <dt>Modularized Structure</dt> |
| 19 | + <dd>Helps maintain a readable code, easy to fix and more room to add new features.</dd> |
13 | 20 |
|
14 | | -For help getting started with Flutter, view our |
15 | | -[online documentation](https://flutter.dev/docs), which offers tutorials, |
16 | | -samples, guidance on mobile development, and a full API reference. |
| 21 | + <dt>Open Source</dt> |
| 22 | + <dd>Any piece of code is free to use anywhere except UI Designs you've to ask permission from relevant designers. Designer's information can be found in app.</dd> |
| 23 | +</dl> |
| 24 | + |
| 25 | +## Requirements to run locally |
| 26 | + |
| 27 | +> Just in case if you ran into errors make sure your'e using correct flutter & dart version. In order to support desktop build master branch is a requirement & Master branch is not stable so breaking changes happen very often. |
| 28 | +
|
| 29 | +- Flutter master channel & Framework • revision `4df8fdb7df` |
| 30 | + - Run `flutter --version` to check it |
| 31 | +- Dart VM version: 2.7.1 |
| 32 | + - Run `dart --version` to check it |
| 33 | +- Follow these step to use correct revision version |
| 34 | + - cd \$FLUTTER_HOME (path where your flutter is installed) |
| 35 | + - git checkout master |
| 36 | + - git checkout `4df8fdb7df` |
| 37 | +- To enable dekstop & web builds run these commands |
| 38 | + - flutter --enable-web |
| 39 | + - flutter --enable-macos-desktop |
| 40 | + - flutter --enable-linux-desktop |
| 41 | + - flutter --enable-windows-desktop |
| 42 | +- Run `flutter doctor` this command will show you what dependencies you need to install. |
| 43 | + |
| 44 | +## Getting started with code |
| 45 | + |
| 46 | +> Please note that this project's code is not meant for beginners! If you're just getting started with flutter I recommend you to explore some ToDo and basic setState apps and get yourself familiar with flutter and dart eco-system becuase in this project intermediate and advance implementations are use which will confuse you and won't help much in terms of learning. |
| 47 | +
|
| 48 | +- There are 2 entry files for this project `main.dart` & `main.mobile.dart`. It was necesarry because I'm using Firebase analytics and crashlytics and there isn't desktop support for Firebase yet. |
| 49 | +- `Navigator.dart` is responisble for managing routes, handles custom trasnition, pass parameter in screens & Controll navigation with keyboard shortcuts. |
| 50 | +- `UI.dart` provides constant for building responsive UI. |
| 51 | +- `blocs/` Intially I was going to implement Rest APIs but that seemed unnecessary & a lot of work So I'll probably remove `blocs/` in futrue. |
| 52 | +- `configs/AppDimensions.dart` this is the magical file. It provides the app with: |
| 53 | + - My custom size unit based on device's width, height & pixel density. |
| 54 | + - Responsive containers. |
| 55 | + - Padding multiplier unit (I learned it with experience instead of using 1,2,3px should use multiplier. it helps maintain constancy around the app). |
| 56 | +- `Widgets/Screen.dart` This widget is necessary when building a new screen. |
| 57 | + - configure theme & font style. |
| 58 | + - You can show popUps. `final screenKey = GlobalKey<ScreenState>();` & `this.screenKey.showPopUp(message: "your message");` |
| 59 | + - It also recieve a `belowBuilder` parameter which builds custom background (This enables us to build Parallax, Animated background & Any thing you could imagine in background). you can find an example in `Screens/Download/Download.dart` |
| 60 | +- Code structure is pretty much simple. |
| 61 | + - Don't import anything form ScreenA in ScreenB. |
| 62 | + - Don't import anthing from Screen/Widget in universal files. |
| 63 | + - Don't import anthing from ScreenA specific Widget in universal files. |
| 64 | + - Each Screen will have `Dimensions.dart` where you can write Screen's responsive logic. |
| 65 | + - I didn't use snake_case in naming convention just becuase I don't prefer it. |
| 66 | + - I use `this` for class's properties & methods I helps keep track of vriables & functions. |
| 67 | + |
| 68 | +## Scripts |
| 69 | + |
| 70 | +> Just run `npm run install` once |
| 71 | +
|
| 72 | +- `scripts/upload.js` |
| 73 | + - `npm run upload platform` // platforms: [apk, windows, linux, macos] |
| 74 | + - This script will upload the release build to your firebase storage |
| 75 | + - I intended to integrate this script with github actions but the use account acess was visible on logs that's why I stick with github-release. |
| 76 | +- `scripts/runAlliOS.js` |
| 77 | + - Need work currently not a priority. |
| 78 | +- `vslaunch.js` |
| 79 | + - `npm run vslaunch` |
| 80 | + - This script will make vscode configuration file with all of your connected devices. |
| 81 | + - You can live debug app on multiple devices at once. |
| 82 | + - Each device's debug logs on seprate **DEBUG CONSOLE**. |
| 83 | + - Very useful when testing UIs for multiple devices. |
| 84 | + |
| 85 | +## Show support |
| 86 | + |
| 87 | +**If you like the project and want to appreciate my effort. Then please perform any of these steps :)** |
| 88 | + |
| 89 | +- Star this repository. |
| 90 | +- Rate the app on <a href="https://play.google.com/store/apps/details?id=com.onemdev.flutter_ui_challenges">Play Store</a>. |
| 91 | +- Endorse my skills on my <a href="https://www.linkedin.com/in/hackerhgl/">linkedin Profile</a>. |
| 92 | +- Favorite my gigs on <a href="https://www.fiverr.com/hackerhgl">fiverr</a>. |
| 93 | +- Give a recommendation on <a href="https://www.freelancer.com/u/hackerhgl">Freelancer</a>. |
| 94 | + |
| 95 | +## Download |
| 96 | + |
| 97 | +<div id="downloads"> |
| 98 | + <a href="https://play.google.com/store/apps/details?id=com.onemdev.flutter_ui_challenges"> |
| 99 | + <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/google-play.png" alt="Play Store badge" /> |
| 100 | + </a> |
| 101 | + <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/app-release.apk"> |
| 102 | + <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/android.png" alt="Android badge" /> |
| 103 | + </a> |
| 104 | + <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/windows-release.zip"> |
| 105 | + <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/windows.png" alt="Windows badge" /> |
| 106 | + </a> |
| 107 | + <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/macos-release.zip"> |
| 108 | + <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/macos.png" alt="MacOS badge" /> |
| 109 | + </a> |
| 110 | + <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/linux-release.zip"> |
| 111 | + <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/linux.png" alt="Linux badge" /> |
| 112 | + </a> |
| 113 | +</div> |
| 114 | + |
| 115 | +## License |
| 116 | + |
| 117 | +This project is licensed under the MIT license, Copyright (c) 2020 Hamza Iqbal. For more information see `LICENSE.md`. |
0 commit comments