An app for the Impels Festival written in Flutter

impuls-festival-app-flutter

open-source festival-app written in flutter for ios & android (and possibly web).

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 festival app

git download [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 festival 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 festival 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