Portfolio>
Flutter Portfolio – by @Aaldn
Live Preview 👀
Features ✨
💙 Responsive and adaptive design, inspired by Brittany Chiang
💙 Riverpod Architecture by Andrea Bizzotto
💙 Feature-first structure
💙 Multiple languages
💙 Multiple themes
💙 Multi-platform (Android, iOS, macOS, Windows, Linux, Web)
Packages in use 📦
These are the main packages used in the app:
- Hooks Riverpod for state-management
- Flutter Hooks to reduce boilerplate code of stateful widgets and increase code reusability
- Freezed to reduce boilerplate code in model classes
- Flex Color Scheme to make AWESOME Flutter Material Design themes
- Google Fonts to use fonts from https://fonts.google.com
- Font Awesome Flutter to use icons from https://fontawesome.com/icons
- Easy Localization for… easy localization
- Intl for date formatting
- Shared Preferences for persistent storage (used to store theme state)
- Firebase Core and Firebase Core Desktop to connect to a firebase app (used for hosting)
See the pubspec.yaml file for the complete list
Fork and deploy with Firebase 🚀
If you haven’t already, install Flutter
Fork and clone this repository (see how to fork and clone a repo)
Navigate to your portfolio directory :
$ cd portfolio
Install dependencies:
$ flutter pub get
Generator 🤖
1. Run the code generator:
$ dart run build_runner build -d
For additional information, refer to the build_runner documentation
$ dart run easy_localization:generate -S assets/translations -f json -O lib/src/localization/generated -o locale_json.g.dart
$ dart run easy_localization:generate -S assets/translations -f keys -O lib/src/localization/generated -o locale_keys.g.dart
Firebase 🔥
If you haven’t already, install Firebase CLI
1. Log into Firebase:
$ firebase login
2. Install the FlutterFire CLI:
$ dart pub global activate flutterfire_cli
3. Create a new Firebase project:
4. Set the Firebase project for your portfolio:
5. Configure your apps to use Firebase:
For additional information, refer to the Firebase setup documentation
6. Initialize Firebase Hosting:
$ firebase init hosting
? What do you want to use as your public directory? (public) build/web
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Set up automatic builds and deploys with GitHub? (y/N) N
$ flutter build web --web-renderer canvaskit --release --no-tree-shake-icons
$ firebase deploy --only hosting
Personalization 🛠️
Note: After making changes, ensure to re-deploy your online portfolio
Content 🖋
1. Portfolio Content:
Modify or add JSON translation files within assets/translations folder to customize the portfolio content. Don’t forget to re-generate your localization files. For an understanding of how JSON translation files are structured, refer to the translation template
If you add or remove a JSON translation file, remember to update the languages key in your other translation files. Also, update the supported locales in the lib/src/localization/app_localizations.dart
For additional information, refer to the easy_localization documentation
2. Your description:
Change the content of your description in the build/web/index.html:
Theme 🎨
1. Launcher Icon and Splash Screen:
Update your launcher icon and your splash screen in the pubspec.yaml
Then, run:
$ dart run flutter_launcher_icons
$ dart run flutter_native_splash:create
For additional information, refer to the flutter_launcher_icons and flutter_native_splash documentations
License 📄
This project is licensed under the MIT License – see the LICENSE file for details
