Flutter Problem: How to use Marquee text in flutter? - flutter

Question

I want to use Marquee Where is my Text Widget.
When I am using marquee by removing text widget After using marquee then my text is disappearing and getting more error in console.
so please help me to use marquee.
import 'package:flutter/material.dart';
import 'package:hospital/CartIcon/cart_icon.dart';
import 'package:hospital/Drawer/dropdown_menu.dart';
import 'package:hospital/MyOrderPage/MyOrderDetailsViewPage/myOrderDetailsView.dart';
import 'package:hospital/constant.dart';
import 'package:intl/intl.dart';
import 'package:marquee/marquee.dart';
class MyOrderPage extends StatefulWidget {
const MyOrderPage({Key key}) : super(key: key);
#override
_MyOrderPageState createState() => _MyOrderPageState();
}
class _MyOrderPageState extends State<MyOrderPage> {
// final DateTime orderDate = DateTime.now();
final DateTime orderDate = DateTime.now();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kGreen,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"My Order",
style: TextStyle(fontStyle: FontStyle.italic),
),
],
),
actions: [CartIcon(), DropDownMenu()],
),
body: Column(
children: [
Container(
// height: 200,
padding: EdgeInsets.all(8),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor.withOpacity(0.3),
blurRadius: 8,
)
],
borderRadius: BorderRadius.circular(8),
color: Colors.white,
),
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Flexible(
//I want to use marquee user instead of text widget here
//Marquee(
// text: 'GeeksforGeeks is a one-stop destination for programmers.',
// style: TextStyle(fontWeight: FontWeight.bold),
//scrollAxis: Axis.horizontal,
// crossAxisAlignment: CrossAxisAlignment.start,
// blankSpace: 20.0,
// velocity: 100.0,
// pauseAfterRound: Duration(seconds: 1),
//showFadingOnlyWhenScrolling: true,
// fadingEdgeStartFraction: 0.1,
// fadingEdgeEndFraction: 0.1,
// numberOfRounds: 3,
//startPadding: 10.0,
// accelerationDuration: Duration(seconds: 1),
// accelerationCurve: Curves.linear,
// decelerationDuration: Duration(milliseconds: 500),
// decelerationCurve: Curves.easeOut,
//)
child: Text(
'Spondylolysis,Pittasnadhanak,D_stone,Natural Tulsi',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
],
),
SizedBox(
height: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text('20-07-2021',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
],
),
SizedBox(
height: 6,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Delivery Status',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Text('Delivered',
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.green)),
],
)
],
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text('Quantity: ',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text('3',
style: TextStyle(
color: Colors.black,
// fontWeight: FontWeight.bold,
fontSize: 18)),
),
],
),
Row(
children: <Widget>[
Text('Totat Amount: ',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Text('324' + '\$',
//total amount
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20)),
),
],
)
],
)
],
),
),
)),
SizedBox(
height: 5,
),
],
),
);
}
}
I want to use Marquee Where is my Text Widget.
When I am using marquee by removing text widget After using marquee then my text is disappearing and getting more error in console.

Answer 1

class MarqueeWidget extends StatefulWidget {
final Widget child;
final Axis direction;
final Duration animationDuration, backDuration, pauseDuration;
MarqueeWidget({
#required this.child,
this.direction: Axis.horizontal,
this.animationDuration: const Duration(milliseconds: 3000),
this.backDuration: const Duration(milliseconds: 800),
this.pauseDuration: const Duration(milliseconds: 800),
});
#override
_MarqueeWidgetState createState() => _MarqueeWidgetState();
}
class _MarqueeWidgetState extends State<MarqueeWidget> {
ScrollController scrollController;
#override
void initState() {
scrollController = ScrollController(initialScrollOffset: 50.0);
WidgetsBinding.instance.addPostFrameCallback(scroll);
super.initState();
}
#override
void dispose(){
scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: widget.child,
scrollDirection: widget.direction,
controller: scrollController,
);
}
void scroll(_) async {
while (scrollController.hasClients) {
await Future.delayed(widget.pauseDuration);
if(scrollController.hasClients)
await scrollController.animateTo(
scrollController.position.maxScrollExtent,
duration: widget.animationDuration,
curve: Curves.ease);
await Future.delayed(widget.pauseDuration);
if(scrollController.hasClients)
await scrollController.animateTo(0.0,
duration: widget.backDuration, curve: Curves.easeOut);
}
}
}
class MarqueeText extends StatefulWidget {
#override
_MarqueeTextState createState() => _MarqueeTextState();
}
class _MarqueeTextState extends State<MarqueeText> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Marquee Text"),
),
body: Center(
child: SizedBox(
width: 200.0,
child: MarqueeWidget(
direction: Axis.horizontal,
child: Text(
"your text"))),
));
}
}