inKino
A multiplatform Dart movie app with 40% of code sharing between Flutter and the Web.
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
- 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));
}
- 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,
),
),
);
}
}
- 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:
-
Clone the repository:
git clone https://github.com/roughike/inKino.git
-
Navigate to the project directory:
cd inKino
-
Get dependencies:
flutter pub get
-
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
inKino - a multiplatform Dart project with code sharing between Flutter and web
What is inKino?
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.
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 thenwebdev 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.
Top Related Projects
completely free for everyone. Its build-in Flutter Dart.
[Example APPS] Basic Flutter apps, for flutter devs.
TodoMVC for Flutter
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot