custom_widget_marquee 0.0.1
custom_widget_marquee: ^0.0.1 copied to clipboard
This is a Flutter package that can enable you turn any Widget into a Marquee
CustomWidgetMarquee #
This is a simple package that gives you the power to turn any Flutter Widget into a Marquee
. With this, you can further control the speed and also allows for manual swiping gestures
.
Outputs #
- For Image Marquee
- For Text Marquee
Features #
-
A
child
widget param that can accommodate any flutter or custom widget. -
A
TextDirection
param that allows you control theDirectionality
of thechild
. -
An
Axis
direction to enable you control the scroll direction for thesingleChildScrollView
wrapper for thechild
. -
A
Duration
controller, for theanimationDuration
,backDuration
and thepauseDuration
of the Marquee. -
A
Curve
parametric animation controller to adjust the rate of change of an animation over time for theforwardAnimation
andbackwardAnimation
. -
An
autoRepeat
boolean value, to control the looping of the Marquee.
Get Started #
In the pubspec.yaml
of your flutter project, add the following to your dependency;
dependencies:
custom_widget_marquee: <latest_version>
In the file you may wish to implement this Marquee
import 'package:custom_widget_marquee/custom_widget_marquee.dart';
Basic Usage #
CustomWidgetMarquee(
animationDuration: const Duration(seconds: 20),
backDuration: const Duration(seconds: 20),
pauseDuration: const Duration(seconds: 2),
directionOption: DirectionOption.twoDirection,
child: SizedBox( // Can accept any Widget
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
_imageList.length,
(index) => Container(
height: 100,
width: 100,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
_imageList[index],
fit: BoxFit.cover,
),
),
),
),
),
),
),
Example #
- For Widget Image Marquee
import 'package:flutter/material.dart';
import 'package:custom_widget_marquee/src/custom_widget_marquee.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Custom Widget Marquee Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Widget Image Marquee'),
),
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
width: double.infinity,
child: Column(
children: [
CustomWidgetMarquee(
animationDuration: const Duration(seconds: 20),
backDuration: const Duration(seconds: 20),
pauseDuration: const Duration(seconds: 2),
directionOption: DirectionOption.twoDirection,
child: SizedBox(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
_imageList.length,
(index) => Container(
height: 100,
width: 100,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
_imageList[index],
fit: BoxFit.cover,
),
),
),
),
),
),
),
const SizedBox(
height: 20,
),
CustomWidgetMarquee(
animationDuration: const Duration(seconds: 40),
backDuration: const Duration(seconds: 40),
pauseDuration: const Duration(seconds: 2),
directionOption: DirectionOption.twoDirection,
child: SizedBox(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
_imageList.length,
(index) => Container(
height: 100,
width: 100,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
_imageList[index],
fit: BoxFit.cover,
),
),
),
),
),
),
),
],
),
),
),
);
}
final List<String> _imageList = [
"https://images.pexels.com/photos/11828990/pexels-photo-11828990.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
"https://images.pexels.com/photos/11828984/pexels-photo-11828984.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
"https://images.pexels.com/photos/11828983/pexels-photo-11828983.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
"https://images.pexels.com/photos/4491624/pexels-photo-4491624.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
"https://images.pexels.com/photos/3986675/pexels-photo-3986675.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
"https://images.pexels.com/photos/3986672/pexels-photo-3986672.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
"https://images.pexels.com/photos/2932479/pexels-photo-2932479.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load",
];
}
- For Widget Text Marquee
import 'package:flutter/material.dart';
import 'package:custom_widget_marquee/src/custom_widget_marquee.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Custom Widget Marquee Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Widget Text Marquee'),
),
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
width: double.infinity,
child: Column(
children: [
CustomWidgetMarquee(
animationDuration: const Duration(seconds: 40),
backDuration: const Duration(seconds: 40),
pauseDuration: const Duration(seconds: 2),
directionOption: DirectionOption.twoDirection,
child: SizedBox(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
_textList.length,
(index) => Text(
_textList[index],
style: TextStyle(
fontSize: 14,
),
),
),
),
),
),
const SizedBox(
height: 20,
),
CustomWidgetMarquee(
animationDuration: const Duration(seconds: 40),
backDuration: const Duration(seconds: 40),
pauseDuration: const Duration(seconds: 2),
directionOption: DirectionOption.twoDirection,
child: SizedBox(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
_textList.length,
(index) => Text(
_textList[index],
style: TextStyle(
fontSize: 14,
),
),
),
),
),
),
],
),
),
),
);
}
final List<String> _textList = [
"Hello George ",
"Thanks for building this ",
"It'll surely come in handy ",
"Suprisingly, any widget I add here will get automatically marqueed "
];
}
Additional information #
You can find the example code here