我正试图使标题文本更加生动或更准确,所以我想用GIF来修饰文本,甚至不确定该怎么做,但我想我是否设法使堆栈充满GIF,然后使最后一层成为CustomClipper<Path>
以填充整个空间,但文本形状看起来像它,问题是我不知道如何使文本形状!除了我要提供的文字形状外,不知道如何制作一条可以填满整个尺寸的路径,请给予任何帮助,或如果您有任何想法可以做到,但是以另一种方式,我也很感兴趣和谢谢。提前。
答案 0 :(得分:4)
啊,我迟到了。好吧,
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类没有关系,它只是模拟背景移动
答案 1 :(得分:2)
您可以使用ImageShader
,ShaderMask
和StreamBuilder
(用于gif)
import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(
title: "test",
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Stream<ui.Image> _image;
@override
initState() {
super.initState();
_image = _getImage();
}
Stream<ui.Image> _getImage() {
var _controller = new StreamController<ui.Image>();
new AssetImage('assets/b.gif')
.resolve(new ImageConfiguration())
.addListener(ImageStreamListener(
(info, _) {
_controller.add(info.image);
}
));
return _controller.stream;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: StreamBuilder<ui.Image>(
stream: _image,
builder: (context, data) {
if (data.data == null)
return Text('loading');
return ShaderMask(
child: Text("Gif !!", style: TextStyle(fontSize: 50),),
blendMode: BlendMode.srcATop,
shaderCallback: (bounds) {
return ui.ImageShader(
data.data,
TileMode.repeated,
TileMode.repeated,
Matrix4.identity().storage,
);
},
);
},
),
));
}
}