Convert Figma logo to code with AI

roughike logoinKino

A multiplatform Dart movie app with 40% of code sharing between Flutter and the Web.

3,626
693
3,626
28

Top Related Projects

completely free for everyone. Its build-in Flutter Dart.

[Example APPS] Basic Flutter apps, for flutter devs.

TodoMVC for Flutter

Quick Overview

inKino is a cross-platform movie and showtime browser app built with Flutter and Dart. It showcases best practices for developing Flutter applications, including state management, testing, and architecture. The app allows users to browse movies, view showtimes, and purchase tickets.

Pros

  • Demonstrates clean architecture and best practices for Flutter development
  • Includes comprehensive unit, widget, and integration tests
  • Supports both iOS and Android platforms with a single codebase
  • Implements effective state management using Redux

Cons

  • Limited to a specific movie theater chain (Finnkino) in Finland
  • May require updates to keep up with evolving Flutter best practices
  • Lacks some advanced features like user accounts or personalized recommendations
  • UI design might need refinement for a more polished look

Code Examples

  1. Fetching movie data using Redux:
@override
Future<void> loadMovies(Store<AppState> store) async {
  final theaters = store.state.theaterState.theaters;
  final selectedTheater = store.state.theaterState.currentTheater;
  final movies = await _finnkinoApi.getSchedule(selectedTheater);

  store.dispatch(ReceivedMoviesAction(movies));
}
  1. Creating a custom widget for movie posters:
class MoviePoster extends StatelessWidget {
  MoviePoster(this.posterUrl, {this.size = 100.0});

  final String posterUrl;
  final double size;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size * 1.5,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 5.0,
            spreadRadius: 1.0,
            offset: Offset(0.0, 2.0),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4.0),
        child: Image.network(
          posterUrl,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
  1. Implementing a Redux reducer:
AppState appReducer(AppState state, dynamic action) {
  return AppState(
    movieState: movieReducer(state.movieState, action),
    showState: showReducer(state.showState, action),
    theaterState: theaterReducer(state.theaterState, action),
    eventState: eventReducer(state.eventState, action),
  );
}

Getting Started

To run the inKino app locally:

  1. Clone the repository:

    git clone https://github.com/roughike/inKino.git
    
  2. Navigate to the project directory:

    cd inKino
    
  3. Get dependencies:

    flutter pub get
    
  4. Run the app:

    flutter run
    

Make sure you have Flutter installed and set up on your development machine before running these commands.

Competitor Comparisons

completely free for everyone. Its build-in Flutter Dart.

Pros of Best-Flutter-UI-Templates

  • Offers a wide variety of UI templates for different app types
  • Provides ready-to-use, customizable components for quick development
  • Includes more complex UI designs and animations

Cons of Best-Flutter-UI-Templates

  • Lacks a cohesive, full-app structure like inKino
  • May require more effort to integrate into a complete application
  • Doesn't demonstrate backend integration or state management

Code Comparison

inKino:

class ShowtimeItem extends StatelessWidget {
  ShowtimeItem(this.showtime);
  final Showtime showtime;

  @override
  Widget build(BuildContext context) {
    // Widget implementation
  }
}

Best-Flutter-UI-Templates:

class DesignCourseAppTheme {
  static TextTheme _buildTextTheme(TextTheme base) {
    const String fontName = 'WorkSans';
    return base.copyWith(
      // Text style definitions
    );
  }
}

The code snippets highlight different focuses:

  • inKino demonstrates a widget for a specific feature (showtimes)
  • Best-Flutter-UI-Templates shows a more general approach to theming and styling

Both repositories offer valuable Flutter resources, but serve different purposes. inKino provides a complete app structure, while Best-Flutter-UI-Templates offers a variety of UI components and designs for inspiration and quick implementation.

[Example APPS] Basic Flutter apps, for flutter devs.

Pros of FlutterExampleApps

  • Offers a wide variety of Flutter app examples, covering multiple use cases and features
  • Regularly updated with new examples and improvements
  • Provides a comprehensive learning resource for Flutter developers of all levels

Cons of FlutterExampleApps

  • Lacks the depth and complexity of a full-fledged app like inKino
  • May not demonstrate best practices for larger, production-ready applications
  • Individual examples might not be as polished or feature-complete as inKino

Code Comparison

inKino:

class Theater extends Equatable {
  Theater(this.id, this.name);
  final String id;
  final String name;

  @override
  List<Object> get props => [id, name];
}

FlutterExampleApps:

class Recipe {
  String title;
  String description;
  String image;
  int servings;
  List<String> ingredients;
  List<String> instructions;

  Recipe({this.title, this.description, this.image, this.servings, 
          this.ingredients, this.instructions});
}

The code comparison shows that inKino uses the Equatable package for value equality, while FlutterExampleApps uses a simpler class structure. inKino's approach is more suitable for larger applications, whereas FlutterExampleApps focuses on simplicity for learning purposes.

TodoMVC for Flutter

Pros of flutter_architecture_samples

  • Demonstrates multiple architecture patterns, providing a comprehensive learning resource
  • Includes extensive testing examples for each architecture
  • Offers a consistent app implementation across different patterns for easy comparison

Cons of flutter_architecture_samples

  • Less focused on real-world application, as it's primarily an educational resource
  • May be overwhelming for beginners due to the variety of architectures presented
  • Lacks some advanced features found in production apps

Code Comparison

inKino:

class EventsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, EventsPageViewModel>(
      converter: (store) => EventsPageViewModel.fromStore(store),
      builder: (_, viewModel) {
        return EventGrid(viewModel.events);
      },
    );
  }
}

flutter_architecture_samples (Redux version):

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, ViewModel>(
      converter: ViewModel.fromStore,
      builder: (context, vm) {
        return FilteredTodos(
          todos: vm.todos,
          onRemove: vm.onRemove,
          onUndoRemove: vm.onUndoRemove,
        );
      },
    );
  }
}

Both examples use a similar pattern with StoreConnector, but flutter_architecture_samples demonstrates a more generic approach that can be applied across different architectures.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

inKino - a multiplatform Dart project with code sharing between Flutter and web

What is inKino?

Build Status

inKino is a multiplatform Dart app for browsing movies and showtimes for Finnkino cinemas.

InKino showcases Redux, has an extensive set of automated tests and 40% code sharing between Flutter and web. The Android & iOS apps are made with a single Flutter codebase. The progressive web app is made with AngularDart. This project is generally something that I believe is a good example of a multiplatform Dart project.

I plan on doing a full article series on multiplatform Dart stuff, so you might want to check out my blog and subscribe to it.

Get it on Google Play Get it on the App Store Get it on the App Store

Folder structure

There's three different folders. Each of them is a Dart project.

  • core: contains the pure Dart business logic, such API communication, Redux, XML parsing, sanitization, i18n, models and utilities. It also has a great test coverage.
  • mobile: this is the Flutter project. It imports core, and it's a 100% shared codebase for the native Android & iOS apps that go on app stores.
  • web: the AngularDart progressive web app. Also imports core, and it's the thing that is live at https://inkino.app.

To work on these projects, open each one of them in an editor of your choice.

For example, if you want to do a new feature and you do it for the Flutter project first, you'd open both core and mobile in separate editor windows. To clarify, you'd do File -> Open... for core and then File -> Open... again for mobile.

Development environment setup

  • Install Dart for the web. The customized Dart version Flutter ships with is not suitable for web development.
  • Install webdev by running pub global activate webdev. This requires that you ran your Dart installation properly and Dart is part of your PATH.
  • Install an IDE. You can't go wrong with WebStorm. If that doesn't tickle your fancy, there are other options too.
  • Install the Dart plugin for your IDE.

Finally, if you haven't already, install Flutter. And the Flutter plugin for your IDE. At the time of being, inKino is built with Flutter 1.0.

If you don't like IDEs, you can apparently use Emacs or Vim too.

Building the project

Renaming the TMDB configuration file

You don't need a TMDB API key, but the actor images won't load without it.

If you try to build the project straight away, you'll get an error complaining that a tmdb_config.dart file is missing. To resolve that, run this on your terminal in the project root:

cd core/lib/src && mv tmdb_config.dart.sample tmdb_config.dart && cd ../../..

OR

If you don't trust in random bash scripts copied from the Internet, you can just rename the tmdb_config.dart.sample to tmdb_config.dart manually.

Building from source

First, ensure that you followed the "Development environment setup" section above.

  • To run the web project, first run pub get initially, and then webdev serve in the root of the web project.
  • To run the Flutter project, open it in your editor and click the play button, or run flutter run on your terminal.

Contributing

Contributions are welcome! However, if it's going to be a major change, please create an issue first. Before starting to work on something, please comment on a specific issue and say you'd like to work on it.

Thanks

Special thanks to Olli Haataja for the design.

Additional thanks for the initial release go to Thibaud Colas, Brian Egan, Alessandro Aime and Juho Rautioaho for giving their extra pair of eyes for reviewing the source code.