flutter - 如何绘制文字的形状?

标签 flutter dart flutter-animation

我正在尝试为抖动的标题文本制作动画前景,或者更准确地说,我希望用类似这样的 GIF 来显示文本 enter image description here我什至不知道该怎么做,但我想如果我设法使堆栈充满 GIF,然后将最后一层设为 CustomClipper<Path>填充整个空间但文本形状然后它看起来像它,问题是我不知道如何制作文本形状!另外我不知道如何制作一条路径来填充整个尺寸除了我将提供的文字形状,请提供任何帮助,或者如果您有任何想法可以做到这一点,但我也有兴趣以不同的方式提前致谢。

最佳答案

啊,我来晚了..好吧,顺其自然

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Title')),
        body: Stack(
          children: [
            FakeAnimatedBackground(),
            ShaderMask(
              blendMode: BlendMode.srcOut,
              shaderCallback: (bounds) => LinearGradient(colors: [Colors.black], stops: [0.0]).createShader(bounds),
              child: SizedBox.expand(
                child: Container(
                  color: Colors.transparent,
                  alignment: Alignment.center,
                  child: const Text('SOME TEXT', style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class FakeAnimatedBackground extends StatefulWidget {
  @override
  _FakeAnimatedBackgroundState createState() => _FakeAnimatedBackgroundState();
}

class _FakeAnimatedBackgroundState extends State<FakeAnimatedBackground> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(milliseconds: 5000), vsync: this)..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      alignment: Alignment.center,
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
      child: Container(
        decoration: BoxDecoration(
          gradient: SweepGradient(colors: [Colors.red, Colors.green, Colors.blue, Colors.red]),
        ),
      ),
    );
  }
}

FakeAnimationBackground类无所谓,只是模拟背景移动

enter image description here

关于flutter - 如何绘制文字的形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58237174/

相关文章:

Flutter 使用视频播放器或 ffmpeg 获取视频帧

listview - Flutter - 提供者调用notifyListeners后ListView没有更新?

flutter - 当我已经为另一个函数进行了计算时,为什么不能将这些计算调用到我的构建中

firebase - 函数在FLutter中返回null

canvas - 神秘 flutter 警告 : Element is implicitly hidden?

flutter - Firestore、检测添加到集合中的新文档等

android-studio - 我如何格式化(粗体)文本中的单词?

flutter - 在 flutter 中捏合缩放 ListView

flutter - 无法 'forward ' flutter 动画

flutter - 带圆角的动画容器