https://github.com/amoshuke/flutter_mosaic

🖼️ Easy mosaic effect for Flutter, add a mosaic effect to any widget
https://github.com/amoshuke/flutter_mosaic

flutter-package mosaic pixel shader widget

Last synced: about 1 month ago
JSON representation

🖼️ Easy mosaic effect for Flutter, add a mosaic effect to any widget

• Host: GitHub
• URL: https://github.com/amoshuke/flutter_mosaic
• Owner: AmosHuKe
• License: mit
• Created: 2024-07-17T05:19:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-22T06:01:00.000Z (10 months ago)
• Last Synced: 2025-04-04T16:34:54.450Z (6 months ago)
• Topics: flutter-package, mosaic, pixel, shader, widget
• Language: Dart
• Homepage: https://pub.dev/packages/flutter_mosaic
• Size: 12 MB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-ZH.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

          
[![GitHub stars](https://img.shields.io/github/stars/amoshuke/flutter_mosaic?style=social&logo=github&logoColor=1F2328&label=stars)](https://github.com/amoshuke/flutter_mosaic)

[![Pub.dev likes](https://img.shields.io/pub/likes/flutter_mosaic?style=social&logo=flutter&logoColor=168AFD&label=likes)](https://pub.dev/packages/flutter_mosaic)

📓 语言：[English](README.md) | 中文  

🎁 查看：[在线示例][]  





Flutter Mosaic




  

  

  

  

  





  Flutter 简易马赛克效果！








  


  查看 [在线示例][]






## 目录 🪄



- [特性](#特性-)

- [安装](#安装-)

  - [版本兼容](#版本兼容-)

  - [添加 flutter_mosaic](#添加-flutter_mosaic-)

- [使用](#使用-)

  - [Mosaic](#mosaic-)

- [贡献者](#贡献者-)

- [许可证](#许可证-)






## 特性 ✨  

- 👀 Shader 着色器效果

- 📦 任意 widget

- 🖼️ 自定义每个马赛克块的宽度、高度

- 🎨 自定义每个马赛克块中的采样数量

## 安装 🎯

### 版本兼容 🐦  

| Flutter               | 3.7.0+       | 3.10.0+ |  

| ---------             | :----------: | :-----: |  

| flutter_mosaic 0.0.1+ | ✅ (Web ❌) | ✅      |  

### 添加 flutter_mosaic 📦  

使用 Flutter 运行以下指令，  

```sh

$ flutter pub add flutter_mosaic

```

或手动将 `flutter_mosaic` 添加到 `pubspec.yaml` 依赖项中。  

```yaml

dependencies:

  flutter_mosaic: ^latest_version

```

## 使用 📖  

示例：[flutter_mosaic/example][]

### Mosaic 📦  

```dart

/// 导入 flutter_mosaic

import 'package:flutter_mosaic/flutter_mosaic.dart';

Mosaic(

  mosaicSize: Size(6.0, 6.0),

  child: Text(

    'Flutter Mosaic',

    style: TextStyle(

      fontSize: 50,

      fontWeight: FontWeight.bold,

    ),

  ),

),

```

| 参数名                            | 类型          | 默认值         | 描述                         |  

| ---                              | ---           | ---            | ---                         |  

| enabled                          | `bool`        | true           | 启用马赛克。                 |  

| mosaicSize `required` | `Size`        | -              | 每个马赛克块的尺寸。          |  

| sampleCount                      | `SampleCount` | SampleCount.s4 | 每个马赛克块的采样数量。      |  

| child `required`      | `Widget`      | -              | 目标 widget（应用马赛克）。   |  

## 贡献者 ✨  

	

		

            

                

                    

                    


                    AmosHuKe

                

            

		

	

## 许可证 📄  

[![MIT License](https://img.shields.io/badge/license-MIT-green)](https://github.com/amoshuke/flutter_mosaic/blob/main/LICENSE)  

根据 MIT 许可证开源。 

© AmosHuKe

[在线示例]: https://amoshuke.github.io/flutter_mosaic

[flutter_mosaic/example]: https://github.com/amoshuke/flutter_mosaic/tree/main/example