Flutter有关ColorFiltered一些有趣实例，图片变色大不同

已收录   阅读次数: 1,955
2021-07-1015:17:38 发表评论
摘要

最近伯衡君正在学习Flutter，今天遇到一个名为ColorFiltered的这个函数，可以用于颜色过滤，总之，能够实现各种图片的特效，如果构建图片类App，这个绝对会用得到，分享给大家……
分享至：
Flutter有关ColorFiltered一些有趣实例，图片变色大不同

开篇寄语

最近伯衡君正在学习Flutter，今天遇到一个名为ColorFiltered的这个函数，可以用于颜色过滤，总之，能够实现各种图片的特效，如果构建图片类App，这个绝对会用得到，分享给大家。

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

色器是采用两种颜色并输出一种颜色的函数。在合成期间应用时，它会在整个图层与目标合并之前独立应用于正在绘制的图层的每个像素。

ColorFilter.mode

创建一个颜色过滤器，它应用作为第二个参数给出的混合模式。源颜色是作为第一个参数给出的颜色，目标颜色是来自正在合成的图层的颜色，看例子就知道如何可用啦，试举例如下：

设计到的关键代码主要是如下所示：

ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Image.network(_imageUrl),
          ),

在main.dart文件是点击按键后改变颜色：

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Using "static" so that we can easily access it later
  static final ValueNotifier<ThemeMode> themeNotifier =
      ValueNotifier(ThemeMode.light);
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
            // Remove the debug banner
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(primarySwatch: Colors.amber),
            darkTheme: ThemeData.dark(),
            themeMode: currentMode,
            home: HomeScreen(),
          );
        });
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        actions: [
          IconButton(
              icon: Icon(MyApp.themeNotifier.value == ThemeMode.light
                  ? Icons.dark_mode
                  : Icons.light_mode),
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              })
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      body: Column(
        children:[
          Image.network(_imageUrl),
          ElevatedButton(
            child: Text('Go to Other Screen'),
            onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => OtherScreen()));
            },
        ),]
      ),
    );
  }
}

// Other Screen
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Other Screen'),
      ),
      body: BookFinderPage(),
    );
  }
}


class BookFinderPage extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Image.network(_imageUrl),
          ),
      ),
    );
  }
}

生成效果如下图所示：

  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同
  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同

ColorFilter.matrix

  • 构造一个通过 5×5 矩阵变换颜色的滤色器，其中第 5 行隐式添加到标识配置中，分解成如下所示：
| R' |   | a00 a01 a02 a03 a04 |   | R |
| G' |   | a10 a11 a22 a33 a44 |   | G |
| B' | = | a20 a21 a22 a33 a44 | * | B |
| A' |   | a30 a31 a22 a33 a44 |   | A |
| 1  |   |  0   0   0   0   1  |   | 1 |

试举例如下：

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Using "static" so that we can easily access it later
  static final ValueNotifier<ThemeMode> themeNotifier =
      ValueNotifier(ThemeMode.light);
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
            // Remove the debug banner
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(primarySwatch: Colors.amber),
            darkTheme: ThemeData.dark(),
            themeMode: currentMode,
            home: HomeScreen(),
          );
        });
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        actions: [
          IconButton(
              icon: Icon(MyApp.themeNotifier.value == ThemeMode.light
                  ? Icons.dark_mode
                  : Icons.light_mode),
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              })
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      body: Column(
        children:[
          Image.network(_imageUrl),
          ElevatedButton(
            child: Text('Go to Other Screen'),
            onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => OtherScreen()));
            },
        ),]
      ),
    );
  }
}

// Other Screen
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Other Screen'),
      ),
      body: BookFinderPage(),
    );
  }
}


class BookFinderPage extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ColorFiltered(
              colorFilter: ColorFilter.matrix([
                0.2126, 0.7152, 0.0722, 0, 0,
                0.2126, 0.7152, 0.0722, 0, 0,
                0.2126, 0.7152, 0.0722, 0, 0,
                0,      0,      0,      1, 0,
            ]),
            child: Image.network(_imageUrl),
          ),
      ),
    );
  }
}

效果基本同上，故不做演示。

ColorFilter.srgbToLinearGamma

  • 创建一个滤色器，将 sRGB 伽马曲线的反转应用于 RGB 通道，试举例如下：
// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Using "static" so that we can easily access it later
  static final ValueNotifier<ThemeMode> themeNotifier =
      ValueNotifier(ThemeMode.light);
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
            // Remove the debug banner
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(primarySwatch: Colors.amber),
            darkTheme: ThemeData.dark(),
            themeMode: currentMode,
            home: HomeScreen(),
          );
        });
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        actions: [
          IconButton(
              icon: Icon(MyApp.themeNotifier.value == ThemeMode.light
                  ? Icons.dark_mode
                  : Icons.light_mode),
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              })
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      body: Column(
        children:[
          Image.network(_imageUrl),
          ElevatedButton(
            child: Text('Go to Other Screen'),
            onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => OtherScreen()));
            },
        ),]
      ),
    );
  }
}

// Other Screen
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Other Screen'),
      ),
      body: BookFinderPage(),
    );
  }
}


class BookFinderPage extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ColorFiltered(
              colorFilter: ColorFilter.srgbToLinearGamma(),
            child: Image.network(_imageUrl),
          ),
      ),
    );
  }
}

生成效果如下图所示：

  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同
    点击前
  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同
    点击后

ColorFilter.linearToSrgbGamma

  • 创建将 sRGB 伽玛曲线应用于 RGB 通道的滤色器，试举例如下：
// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Using "static" so that we can easily access it later
  static final ValueNotifier<ThemeMode> themeNotifier =
      ValueNotifier(ThemeMode.light);
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
        valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
            // Remove the debug banner
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: ThemeData(primarySwatch: Colors.amber),
            darkTheme: ThemeData.dark(),
            themeMode: currentMode,
            home: HomeScreen(),
          );
        });
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        actions: [
          IconButton(
              icon: Icon(MyApp.themeNotifier.value == ThemeMode.light
                  ? Icons.dark_mode
                  : Icons.light_mode),
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              })
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      body: Column(
        children:[
          Image.network(_imageUrl),
          ElevatedButton(
            child: Text('Go to Other Screen'),
            onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => OtherScreen()));
            },
        ),]
      ),
    );
  }
}

// Other Screen
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Other Screen'),
      ),
      body: BookFinderPage(),
    );
  }
}


class BookFinderPage extends StatelessWidget {
  final _imageUrl =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ColorFiltered(
              colorFilter: ColorFilter.linearToSrgbGamma(),
            child: Image.network(_imageUrl),
          ),
      ),
    );
  }
}

生成效果如下图所示：

  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同
    点击前
  • Flutter有关ColorFiltered一些有趣实例，图片变色大不同
    点击后

收 藏
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: