Open-Source Festival-app written in Flutter for iOS & Android (and possibly web).
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@example.com:kodekameratene/impuls-app-flutter.git cd impuls-app-flutter flutter pub get flutter run
assets/images/icon.png & run the following command.
flutter pub run flutter_launcher_icons:main
Updating splash screen
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
flutter_native_splash: image: assets/images/splash.png color: "#021f2d" <- Change this to your favorite background color
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
. ├── 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
Let’s take a closer look at the
lib ├── main.dart ├── models ├── pages ├── providers ├── requests ├── views └── widgets
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.
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.
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
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.
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
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
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.
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.
This is the place to keep all our custom widgets.
widgets ├── FrostedButton.dart ├── decrement.dart ├── increment.dart └── toggleTheme.dart