Flutter 自定义画笔CustomPaint

最新推荐文章于 2024-05-03 10:36:03 发布

原创

最新推荐文章于 2024-05-03 10:36:03 发布 · 322 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客展示了如何在Flutter中利用CustomPaint组件创建一个自定义的太阳图案。通过LayoutBuilder根据屏幕宽度调整布局，当屏幕宽度大于600像素时，展示包含太阳图像的宽版容器；否则，显示简单的红色方块。CustomPaint类结合RadialGradient渐变效果绘制了太阳，并提供了语义构建器为太阳添加辅助功能描述。

Flutter 自定义画笔CustomPaint。

官方示例，显示有一个太阳，强。

/// Flutter code sample for LayoutBuilder

// This example uses a [LayoutBuilder] to build a different widget depending on the available width. Resize the
// DartPad window to see [LayoutBuilder] in action!

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

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaff