This is a Flutter project that demonstrates how to use custom shaders. The shaders are taken from the ShaderToy community and adapted for Flutter. The application displays a grid of shader examples, and tapping on each one opens a detailed view.
Key Technologies:
- Flutter
- GLSL (OpenGL Shading Language)
Architecture:
- The main entry point is
lib/main.dart, which sets up the application and the home page. - The home page (
HomePage) displays aGridViewofShaderPagewidgets. - Each
ShaderPagecan be aGeneralShaderPageor anImageShaderPage, depending on whether it uses an image as a texture. - The shaders are located in the
shadersdirectory and are defined in.fragfiles. - Assets, including images and shaders, are declared in
pubspec.yaml. - The
lib/config/assets.dartfile contains a class with static constants for asset paths, which is a good practice for managing assets.
To build and run this project, you need to have the Flutter SDK installed.
- Get dependencies:
flutter pub get
- Run the app:
flutter run
Testing:
To run the tests, use the following command:
flutter test- Asset Management: Asset paths are managed in the
lib/config/assets.dartfile. When adding new assets, declare them inpubspec.yamland then add a corresponding constant to theAssetsclass. - Shaders: Shaders are written in GLSL and have the
.fragextension. They are located in theshadersdirectory. To add a new shader, you need to add it to theshadersdirectory and declare it in thepubspec.yamlfile. - Code Style: The project follows the standard Dart and Flutter code style. The
analysis_options.yamlfile includesflutter_lintsfor enforcing good coding practices.