Skip to content

Instantly share code, notes, and snippets.

@incon
Last active July 11, 2020 03:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save incon/8bf3334fff61ef595e9d95f021fa8e4f to your computer and use it in GitHub Desktop.
Save incon/8bf3334fff61ef595e9d95f021fa8e4f to your computer and use it in GitHub Desktop.
Text Scroller without a CustomPainter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
AnimationController _animdationController;
List<String> labels = ['First Label', 'Second Label'];
@override
void initState() {
super.initState();
_animdationController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
labels = labels.reversed.toList();
_animdationController.forward(from: 0);
}
})
..forward();
}
@override
void dispose() {
_animdationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
backgroundColor: Colors.green,
body: Center(
child: Container(
height: 20,
child: ClipRRect(
child: ShaderMask(
shaderCallback: (Rect bounds) => LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: <Color>[
Colors.white.withAlpha(0),
Colors.white,
Colors.white,
Colors.white,
Colors.white.withAlpha(0)
],
).createShader(bounds),
blendMode: BlendMode.srcIn,
child: OverflowBox(
maxHeight: 40,
child: AnimatedBuilder(
animation: _animdationController,
child: Column(
children: <Widget>[
Container(
height: 20,
child: Center(
child: Text(
labels[0],
),
),
),
Container(
height: 20,
child: Center(
child: Text(
labels[1],
),
),
),
],
),
builder: (BuildContext context, Widget child) {
return Transform.translate(
offset: Offset(
0,
Curves.slowMiddle
.transform(_animdationController.value) *
20,
),
child: child,
);
},
),
),
),
),
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment