Aleteo – Marquesina

Marquee es un widget de aleteo que se desplaza infinitamente. Se detiene después de cada ronda de desplazamiento y tiene características como duración, curva y es altamente personalizable. Se utiliza para la entrega de contenido de gran tamaño en la mayoría de las aplicaciones de redes sociales. Generalmente se usa como banner para hacer anuncios en la aplicación, ya que llama fácilmente la atención del usuario.

Se define como sigue:

Syntax:
Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

Parámetros clave:

• texto: Contiene el texto que se muestra en el pergamino.
• estilo: se utiliza para personalizar y diseñar el pergamino
• bankSpace: determina la brecha entre cada desplazamiento posterior
• velocidad: Determina la velocidad a la que el scroll hace rodar el texto
• pauseAfterRound: se usa para establecer después de cuántas iteraciones debe detenerse el desplazamiento

Ahora, veamos su implementación con un ejemplo simple.

Ejemplo:

Aquí construiremos una aplicación simple con dos pergaminos. Para hacerlo, siga los siguientes pasos:

1. Agregue la Dependencia:

La dependencia de marquesina debe agregarse en la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:

2. Importar la Dependencia:

Para importar la dependencia al archivo main.dart, use la siguiente línea de código:

import 'package:marquee/marquee.dart';

3. Estructuración de la aplicación:

En esta etapa le daremos una estructura simple a nuestra aplicación usando una extensión StatelessWidget como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: 
      ),
    );
  }

4. Construye la marquesina:

Tendremos dos conjuntos diferentes de la marquesina en la aplicación. El primero será bastante simple y se llamará _buildMarquee y se define como se muestra a continuación:

Widget _buildMarquee() {
  return Marquee(
    text: 'GeeksforGeeks.org was created'
        ' with a goal in mind to provide well written,'
        ' well thought and well explained solutions for'
        ' selected questions. The core team of five super geeks constituting'
        ' of technology lovers and computer science enthusiasts'
        ' have been constantly working in this direction ',
  );
}

La segunda marquesina es donde exploraremos sus propiedades como se discutió anteriormente en el artículo. Nombraremos la segunda marquesina como _buildComplexMarquee y la definiremos de la siguiente manera:

Widget _buildComplexMarquee() {
  return 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,
  );
}

El espacio entre la primera marquesina y la segunda marquesina se define usando un widget simple de la siguiente manera:

  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(height: 50.0, color: Colors.white, child: child),
    );
  }
}

Ahora agregue la marquesina al cuerpo de la aplicación que creamos en el tercer paso.

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';
   
void main() => runApp(MyApp());
   
class MyApp extends StatelessWidget {
  @override
    
  // root of the application
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ListView(
          padding: EdgeInsets.only(top: 50.0),
          children: [
            _buildMarquee(),
            _buildComplexMarquee(),
          ].map(_wrapWithStuff).toList(),
        ),
      ),
    );
  }
    
  // Primary Marquee text
  Widget _buildMarquee() {
    return Marquee(
      text: 'GeeksforGeeks.org was created'
          ' with a goal in mind to provide well written,'
          ' well thought and well explained solutions for'
          ' selected questions. The core team of five super geeks constituting'
          ' of technology lovers and computer science enthusiasts'
          ' have been constantly working in this direction ',
    );
  }
    
  //Secondary Marquee text
  Widget _buildComplexMarquee() {
    return 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,
    );
  }
    
  // Styling the Marquee
  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(height: 50.0, color: Colors.white, child: child),
    );
  }
}

Producción: