Flutter development practice - realize marquee display text marquee effect according to text length

Flutter development practice - realize marquee text marquee effect

In the recent development process, marquee text marquee effect is needed. Here, the plug-in marquee of flutter is used.

The renderings are as follows

One, marquee

1.1 Introducing marquee

Introduce marquee in pubspec.yaml

  # 跑马灯效果
  marquee: ^2.2.3

1.2 use of marquee

Marquee is also very convenient to use. For example, directly specify the text text

Marquee(
  text: 'flutter开发实战-实现marquee文本跑马灯效果',
)

or set more attribute values

Marquee(
  // 文本
  text: '实现marquee文本跑马灯效果，这里是一传长文本',
  // 文本样式
  style: TextStyle(fontWeight: FontWeight.bold),
  // 滚动轴：水平或者竖直
  scrollAxis: Axis.horizontal,
  // 轴对齐方式start
  crossAxisAlignment: CrossAxisAlignment.start,
  // 空白间距
  blankSpace: 20.0,
  // 速度
  velocity: 100.0,
  // 暂停时长
  pauseAfterRound: Duration(seconds: 1),
  // startPadding
  startPadding: 10.0,
  // 加速时长
  accelerationDuration: Duration(seconds: 1),
  // 加速Curve
  accelerationCurve: Curves.linear,
  // 减速时长
  decelerationDuration: Duration(milliseconds: 500),
  // 减速Curve
  decelerationCurve: Curves.easeOut,
)

2. Whether a marquee effect is required according to the width of the text

According to the size of the Text text, judge whether it is necessary to display the marquee effect, and to obtain the size of the text, you need TextPainter to obtain Size
TextPainter View: https://blog.csdn.net/gloryFlow/article/details/132198113

2.1 Determine whether to display the marquee effect according to the obtained text width

Determine whether the calculated text width exceeds the specified ContainerWidth to determine whether to display Marquee

code show as below

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';

typedef MarqueeBuilder = Marquee Function(
    BuildContext context, String text, TextStyle textStyle);
typedef TextBuilder = Text Function(
    BuildContext context, String text, TextStyle textStyle);

class MarqueeText extends StatelessWidget {
    
    
  final String text;
  final TextStyle textStyle;
  final double containerWidth;
  final TextBuilder textBuilder;
  final MarqueeBuilder marqueeBuilder;

  const MarqueeText(
      {
    
    Key? key,
        required this.marqueeBuilder,
        required this.textBuilder,
        required this.text,
        required this.textStyle,
        required this.containerWidth})
      : super(key: key);

  Size calculateTextSize(String text, TextStyle style) {
    
    
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }

  @override
  Widget build(BuildContext context) {
    
    
    final textWidth = this.calculateTextSize(this.text, this.textStyle).width;
    return textWidth < this.containerWidth
        ? this.textBuilder(context, text, textStyle)
        : this.marqueeBuilder(context, text, textStyle);
  }
}

2.2 Use the custom Widget

Below I use the Widget
code of this marquee as follows

Container(
            width: size.width,
            height: size.height,
            alignment: Alignment.center,
            color: Colors.greenAccent,
            // child: LoadingWidget(bgColor: Colors.blueGrey,),
            child: MarqueeText(
              containerWidth: 300,
              text: "如果你不相信努力和时光，那么时光第一个就会辜负你。不是因为有希望才去努力，而是努力了，才能看到希望。",
              textStyle: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
                color: Colors.redAccent,
                decoration: TextDecoration.none,
              ),
              marqueeBuilder: (context, text, textStyle) => Marquee(
                text: text,
                style: textStyle,
                scrollAxis: Axis.horizontal,
                crossAxisAlignment: CrossAxisAlignment.start,
                blankSpace: 20.0,
                velocity: 100.0,
                pauseAfterRound: Duration(milliseconds: 500),
                showFadingOnlyWhenScrolling: true,
                fadingEdgeStartFraction: 0.1,
                fadingEdgeEndFraction: 0.1,
                startPadding: 10.0,
                accelerationDuration: Duration(milliseconds: 100),
                accelerationCurve: Curves.linear,
                decelerationDuration: Duration(milliseconds: 100),
                decelerationCurve: Curves.easeOut,
                textDirection: TextDirection.ltr,
              ),
              textBuilder: (context, text, textStyle) => Text(
                text,
                style: textStyle,
              ),
            ),
          ),

3. Summary

Flutter development practice - realize marquee display text marquee effect according to text length. Calculate the width of the text content through TextPainter and compare it with ContainerWidth to determine whether marquee needs to be displayed.
Learning records, keep improving every day.