droidconke / flutterconkeapp

Flutter Con Kenya 2024

This is the official Flutter Con Kenya 2024 mobile application. The application is built using Flutter and Dart programming language. The application is designed to provide information about the conference, speakers, schedule, and sponsors. The application also provides a platform for attendees to interact with each other and the speakers.

Getting Started

To get started with this project, you need to have Flutter installed on your machine. You can follow the instructions on the official Flutter website to install Flutter on your machine.

Features

App will have the following features:

• Sessions
• Feed
• About
• Home
• Speakers
• Sponsors
• Authentication
• Feedback

Designs

This is the link to the app designs:
Light Theme: https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/
Dark Theme: https://xd.adobe.com/view/5ec235b6-c3c6-49a9-b783-1f1303deb1a8-0b91/

REST API: Postman Files

Contributing

If you would like to contribute to this project, you can first create an issue describing the feature you'd like to do. This helps prevent duplication of effort (working on something someone else is already working on).

After the discussion on the GitHub issue,you can fork the repository and create a new branch for your changes. Once you have made your changes, you can create a pull request to merge your changes into the main branch. For much smaller fixes like typos, you can skip the create issue step.

Tip: Keep feature contributions small and focused. This makes it easy to review contributions and spot errors if any

APK Signing

To ensure that the correct SHA1 key is available for signing the APK to enable social auth with Firebase, we need to maintain a single public keystore so that we don't need to add everyone's debug key to the Firebase app.

Create a file android/key.properties with values as follows

storePassword=publicDevKey@2024
keyPassword=publicDevKey@2024
keyAlias=publicDevKey
storeFile=../public-dev-keystore.jks

Ensure the storeFile path is correct depending on your OS

App Architecture

State Management

For this project, we use flutter_bloc. You can find documentation here

The architecture portion has a really good explanation of how we plan to architect the app conceptually.

Folder Structure

We use a folder first then a feature based approach to structuring folders. This would look similar to:

lib

• repositories
  • repository.dart
• blocs
  • auth
  • speakers
• ui
  • auth
  • speakers

If you have a preferred different approach to structuring your folders, join the discussion here.

Routing

For routing, we will use the go_router package. It offers the benefit of simplifying the usage of navigator 2.0, which is helpful for deep linking

License

This project is licensed under the MIT License - see the LICENSE file for details.

### Output
```markdown
# Flutter Con Kenya 2024

flutterconkeapp's Issues

Authentication

Work on integration of Auth using Google and obtain bearer token to be used in consuming the API

Add a bit more documentation

On the README, we should add some documentation

I think this should involve the things like all the features the app should have, the file structure, apis/backend, theming, routing, state management, and any others

Perhaps we should also have a contributing.md file

Fix linting problems

With the updated linting checker, there are a number of problems that have come up which need step-by-step fixing. In your VS Code, these should appear under the Problems tab. These issues doesn't prevent the app from building, but great to ensure proper code aesthetics.

Consuming APIs

Once Auth has been done, consuming the APIs should be easy. Optionally you can obtain the bearer token and be working on this issue.

Update routing approach

This issue should update the current routing approach used in the app to the one that was agreed upon in this discussion.

Update code linting

To promote code quality, we can bump up the intensity of the lining rules in the following manner:

• Add very_good_analysis: ^6.0.0 to the dev_dependencies: section of the pubspec.yaml file
• Update your analysis_options.yaml file as follows:

include: package:very_good_analysis/analysis_options.6.0.0.yaml

analyzer:
  exclude:
    - lib/generated_plugin_registrant.dart
    - lib/**/*.g.dart
    - lib/**/*.freezed.dart
  errors:
    invalid_annotation_target: ignore
    
linter:
  rules:
    public_member_api_docs: false

Most linting errors can be fixed by running dart fix --apply && dart format lib test then about 10 errors will need manual fixes. This should be done though once you are finished with everything else. If you feel it can't go into this PR, I can convert this into an issue to enhance code quality.

Originally posted by @MillerAdulu in #19 (comment)

Load sessions

We need to load the sessions into the app.

API Path: events/droidconke-2022-281/sessions

Design Reference:

• https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/e9ee3779-0435-4e34-a9d8-03327b38b45d
• https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/bfed7462-5ae7-4a23-8694-9e2d07487727

Steps
Similar to the guidelines from #44

Notes

• If you run into any problem, you can add a comment to this issue to have it resolved

Load speakers

We need to load the event speakers into the app.

API Path: events/droidconke-2022-281/speakers

Design Reference: https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/e9ee3779-0435-4e34-a9d8-03327b38b45d

Steps
Similar to the guidelines from #44

Notes

• If you run into any problem, you can add a comment to this issue to have it resolved

Volunteer to help manage repo

We currently take a long time (days to weeks) to review/merge pull requests.
Understandable given people having quite busy schedules, but it might result in a lot of merge conflicts as many people contribute to different parts of the codebase.
I'm offering to help give time towards doing so.

Load feed

We need to load the sessions into the app.

API Path: events/droidconke-2022-281/feeds

Design Reference: https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/aabbe326-f4d9-4fae-9cbc-433491567613

Steps
Similar to the guidelines from #44

Notes

• If you run into any problem, you can add a comment to this issue to have it resolved

Proposal to enable discussions

Having a discussion forum on this repository will go a long way to assist contributors effectively communicate and make decisions such as architecture, state management approaches to implement. etc

Load sponsors

We need to load the event sponsors into the app.

API Path: events/droidconke-2022-281/sponsors

Design Reference: https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/b09d2509-32d4-46ed-ab0c-e41444e175c3

Steps
Similar to the guidelines from #44

Notes

• If you run into any problem, you can add a comment to this issue to have it resolved

Build configuration

We need to get the application to work in a uniform manner across both the iOS & Android platforms. To make this happen:

• Re-scaffold the app using Very Good CLI which provides great flavour support
• Remove the need for the env/keys.example system since this project doesn't have crucial privacy concerns to warrant this. The values required can be hard-coded.

Configure Firebase

There's a need to setup Firebase to support:

• Social Auth
• Crashlytics
• App Distribution

Load organisers

We need to load the event organisers into the app.

Design Reference: https://xd.adobe.com/view/dd5d0245-b92b-4678-9d4a-48b3a6f48191-880e/screen/b09d2509-32d4-46ed-ab0c-e41444e175c3

Steps

1. On a new branch from main and run code generation. The command is available in the Makefile as gen:
2. In the lib/common/data/models folder, create a freezed model file (Reference lib/common/data/models/room.dart) that will be used to decode the JSON data from the API. Reference the data from https://documenter.getpostman.com/view/3385291/SzS4TTXb#9d64fa2d-6f4d-409b-817b-072093c4e3c8 to help you properly construct the models

import 'package:freezed_annotation/freezed_annotation.dart';

part 'organisers.freezed.dart';
part 'organisers.g.dart';

@freezed
class Organiser with _$Organiser {
  factory Organiser({
    required int id,
// ...
  }) = _Organiser;

  factory Organiser.fromJson(Map<String, Object?> json) =>
      _$OrganiserFromJson(json);
}

@freezed
class OrganiserResponse with _$OrganiserResponse {
  const factory OrganiserResponse({
    required List<Organiser> data,
  }) = _OrganiserResponse;

  factory OrganiserResponse.fromJson(Map<String, Object?> json) =>
      _$OrganiserResponseFromJson(json);
}

3. In the lib/common/repository/api_repository.dart file, add a method to call the organisers API. You should be able to copy-paste fetchSessions and adjust the return type and the API path

Future<List<Organiser>> fetchOrganisers({
    int perPage = 20,
    int page = 1,
  }) async {
    final response = await _networkUtil.getReq(
      '/events/organisers',
      queryParameters: {'per_page': perPage, 'page': page},
    );

    return OrganiserResponse.fromJson(response).data;
  }

4. In the lib/features/home folder, create a cubit that will be used to get the data from the API and update the state of the UI

// lib/features/home/cubit/fetch_organisers_cubit.dart
import 'package:bloc/bloc.dart';
import 'package:fluttercon/common/data/models/models.dart';
import 'package:fluttercon/common/data/models/organisers.dart';
import 'package:fluttercon/common/repository/api_repository.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'fetch_organisers_state.dart';
part 'fetch_organisers_cubit.freezed.dart';

class FetchOrganisersCubit extends Cubit<FetchOrganisersState> {
  FetchOrganisersCubit({
    required ApiRepository apiRepository,
  }) : super(const FetchOrganisersState.initial()) {
    _apiRepository = apiRepository;
  }

  late ApiRepository _apiRepository;

  Future<void> fetchOrganisers() async {
    emit(const FetchOrganisersState.loading());
    try {
      final organisers = await _apiRepository.fetchOrganisers();
      emit(FetchOrganisersState.loaded(organisers: organisers));
    } on Failure catch (e) {
      emit(FetchOrganisersState.error(e.message));
    } catch (e) {
      emit(FetchOrganisersState.error(e.toString()));
    }
  }
}

// lib/features/home/cubit/fetch_organisers_state.dart
part of 'fetch_organisers_cubit.dart';

@freezed
class FetchOrganisersState with _$FetchOrganisersState {
  const factory FetchOrganisersState.initial() = _Initial;
  const factory FetchOrganisersState.loading() = _Loading;
  const factory FetchOrganisersState.loaded({
    required List<Organiser> organisers,
  }) = _Loaded;
  const factory FetchOrganisersState.error(String message) = _Error;
}

5. Run code generation
6. In lib/bootstrap.dart, register the cubit in the providers array

BlocProvider<FetchOrganisersCubit>(
  create: (_) => FetchOrganisersCubit(
    apiRepository: getIt(),
  ),
),

7. In lib/features/home/widgets/organizers_card.dart, see that you can fetch the results from the API

@override
  void initState() {
    context.read<FetchOrganisersCubit>().fetchOrganisers();
    super.initState();
  }

8. Proceed to setup the BlocConsumer/BlocBuilder as usual with the various states. The scaffold for the builder will look something like

BlocBuilder<FetchOrganisersCubit, FetchOrganisersState>(
  builder: (context, state) => state.maybeWhen(
    loaded: (organisers) => Row(
      children: [
        for (final organiser in organisers)
          CircleAvatar(
            radius: 20,
            backgroundImage: NetworkImage(organiser.id.toString()),
          ),
      ],
    ),
    error: (message) => Text(
      message,
      style: Theme.of(context).textTheme.titleMedium?.copyWith(
            fontWeight: FontWeight.bold,
            color: isDark ? Colors.white : ThemeColors.blueColor,
            fontSize: 18,
          ),
    ),
    orElse: () => const Center(
      child: CircularProgressIndicator(),
    ),
  ),
),

9. Ensure to tune the UI properly and you can open a PR with your work. 🎊

Notes

• If you run into any problem, you can add a comment to this issue to have it resolved

Move all strings to arb files

To solve the lines_longer_than_80_chars issue, move all the strings to the .arb file and reference them correctly.

Example:
In lib/l10n/arb/app_en.arb, add an entry

"feedback": "Feedback",
"@feedback": {}

In lib/common/widgets/app_bar/feedback_button.dart, add the following lines:

final l10n = context.l10n;  // Just after the opening of the 
//definition of the build method

Text(l10n.feedback, // Reference the feedback key here,
// run the app allowing for debugging errors to generate the references

Duplicate model folders

There are two duplicate model folders one in the data folders and the other on lib. I think the one on the data folder should stay