Impuls-App-Flutter

Open-Source Festival-app written in Flutter for iOS & Android (and possibly web).

appstore
gplay

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 git@github.com:kodekameratene/impuls-app-flutter.git
cd impuls-app-flutter
flutter pub get
flutter run
Bash

Updating icon

icon

Replace the icon.png located assets/images/icon.png & run the following command.

flutter pub run flutter_launcher_icons:main
Bash

Updating splash screen

splash

Replace the splash.png located assets/images/splash.png & run the following command.

flutter pub run flutter_native_splash:create
Bash

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
Yum

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
Tree

Lib-folder

Let's take a closer look at the lib-folder.

lib
├── main.dart
├── models
├── pages
├── providers
├── requests
├── views
└── widgets
Tree

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
Tree

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
Tree
FlatButton(
  child: Text("Navigate to SomePage"),
  onPressed: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SomePage(),
    ),
  ),
);
Dart

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
Tree

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
Tree

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
Tree

Widgets

Widgets, widgets, widgets.

This is the place to keep all our custom widgets.

widgets
├── FrostedButton.dart
├── decrement.dart
├── increment.dart
└── toggleTheme.dart
Tree

GitHub

https://github.com/kodekameratene/impuls-app-flutter