Impuls-App-Flutter
Open-Source Festival-app written in Flutter for iOS & Android (and possibly web).
Get in touch
We don't bite... And we would love to have you onboard! ๐
If you want to join us in creating awesome stuff, connect with us on Discord. You are also welcome to just hang around. ๐
Report issues / feature requests
ZenHub
https://app.zenhub.com/workspaces/impuls-5e1f68bc7fc3f65df8ab07e6
Dependencies
Flutter
Flutter is the glue that make creating a universal app (iOS + Android) possible. Check it out , it's pretty awesome.
Getting started with developing
git clone [email protected]:kodekameratene/impuls-app-flutter.git
cd impuls-app-flutter
flutter pub get
flutter run
Updating icon
Replace the icon.png
located assets/images/icon.png
& run the following command.
flutter pub run flutter_launcher_icons:main
Updating splash screen
Replace the splash.png
located assets/images/splash.png
& run the following command.
flutter pub run flutter_native_splash:create
Try to keep the dimensions the same, so that it will show on all device-resolutions. The current one uses an iPhone SE as a baseline.
Make sure to upload the image with an alpha and change the background color in pubspec.yaml
.
flutter_native_splash:
image: assets/images/splash.png
color: "#021f2d" <- Change this to your favorite background color
Folder structure
Here is the folder structure of our Flutter app. Flutter has generated an Android and iOS folder. If you open it you will see that they are normal ios & android projects.
But since we use Flutter, we mostly care about the lib
-folder.
.
โโโ android
โย ย โโโ app
โย ย โโโ gradle
โโโ assets
โย ย โโโ images
โโโ build
โย ย โโโ flutter_assets
โย ย โโโ ios
โโโ ios
โย ย โโโ Flutter
โย ย โโโ Runner
โย ย โโโ Runner.xcodeproj
โย ย โโโ Runner.xcworkspace
โโโ lib
โย ย โโโ models
โย ย โโโ pages
โย ย โโโ providers
โย ย โโโ requests
โย ย โโโ views
โย ย โโโ widgets
โโโ resources
โโโ test
โโโ web
Lib-folder
Let's take a closer look at the lib
-folder.
lib
โโโ main.dart
โโโ models
โโโ pages
โโโ providers
โโโ requests
โโโ views
โโโ widgets
Main.dart
Right inside the lib
-folder you find the main.dart. This is where the whole app gets setup and started.
You can se that we are wiring up our Providers at the root build-method of our app. This makes it easy for our widgets to share some state. Take a look at this video by Paul Halliday for an introduction to providers.
https://www.youtube.com/watch?v=8II1VPb-neQ
He is here also talking about bloc, but I don't think he actually is using the bloc-pattern... Anyways. It's a great video that made Providers easy for me to understand.
Models
A model is a class that represents the data we want to show in the app. It helps us in making sure that we use our data in a way that makes sense.
That was a bit abstract... Talk to Henry if you have any questions. Or update this readme with a better explanation. Thank you.
models
โโโ Arrangement.dart
โโโ Event.dart
โโโ InfoPost.dart
โโโ NewsPost.dart
Tip: Use the amazing JSON to Dart-converter by Javier Lecuona to generate dart classes from your JSON.
Pages
This is where we put whole "fully-scaffolded" pages.
pages
โโโ DetailPage.dart
โโโ EventDetailPage.dart
โโโ InfoDetailPage.dart
โโโ NewsDetailPage.dart
โโโ TabPage.dart
โโโ counter.dart
Navigate to SomePage
FlatButton(
child: Text("Navigate to SomePage"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SomePage(),
),
),
);
See https://flutter.dev/docs/cookbook/navigation/navigation-basics for a good introduction to navigation.
Providers
This is the famous provider. Makes it easy to share state up and down the application-tree cross widgets.
providers
โโโ AppSettings.dart
โโโ ArrangementProvider.dart
โโโ EventProvider.dart
โโโ EventsProvider.dart
โโโ InfoProvider.dart
โโโ NewsProvider.dart
โโโ counter_bloc.dart
Todo: Write an introduction
Requests
This is where we add all our api-endpoints.
Currently we only have one api, that we simply call api.dart
. But in the future, we may have a api weather.dart
.
requests
โโโ api.dart
The api is connected to a provider that takes the data and makes objects with our models, then provides that data to all our other widgets.
Views
This is where we add our, you guessed it, Views. A View is a combination of multiple Widgets.
A View needs to be shown inside a Page since it lacks the scaffolding that is needed for making it a page.
views
โโโ CalendarView.dart
โโโ InfoView.dart
โโโ IntroView.dart
โโโ NewsView.
dart
Widgets
Widgets, widgets, widgets.
This is the place to keep all our custom widgets.
widgets
โโโ FrostedButton.dart
โโโ decrement.dart
โโโ increment.dart
โโโ toggleTheme.dart
Contribution guide
Properly naming branches
When creating a new feature or solving an issue.
Create a new branch f/<featurename>
We use f/
for features bf/
for bugfix etc...
It doesn't matter that much as long as it makes sense.
PR
Then create a pull request aka. PR here on GitHub and assign me (sjoenH) or the utvikler
-team as a reviewer.
Assigning the utvikler
-team will do some load-balancing, auto assigning someone in the team.
Your branch should be merged into the develop
-branch (not straight into master). We only have production code in master-branch.
We may delete the feature-branch after it has been merged into develop.
Publishing a new version
Make a PR from develop
into master
and tag your code.
For example.
git tag v1.0.0
git push origin v1.0.0
Tagging a release should trigger a new build on Codemagic.
Other stuff to remember
iOS screenshots to add when submitting to App Store
https://help.apple.com/app-store-connect/#/devd274dd925
Devices:
- 6.5 inch (iPhone 11 Pro Max)
- 5.5 inch (iPhone 8 Plus)
- 12.9 inch (3rd generation iPad Pro)
- 12.9 inch (2nd generation iPad Pro)