Flutter – Texto desplazable

En este artículo, vamos a crear una aplicación Flutter en la que agregaremos un widget de texto que se puede desplazar horizontal o verticalmente. Estos pueden tener una amplia gama de aplicaciones dependiendo de las necesidades de los usuarios. Aquí implementaremos la forma más simple de texto desplazable.

Podemos hacer que el texto se pueda desplazar en flutter usando estos 2 widgets:

• Clase expandida: un widget que expande un elemento secundario de una Fila, Columna o Flex para que el elemento secundario llene el espacio disponible.
• Clase SingleChildScrollView: un cuadro en el que se puede desplazar un solo widget.

Tenemos que envolver el widget de Texto dentro del widget SingleChildScrollView y luego envolver el widget SingleChildScrollView dentro del widget Expandido como este:

Expanded(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(
              "GeeksForGeeks : Learn Anything, Anywhere",
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
          ),
        );

Veamos ahora un ejemplo:

Ejemplo 1: desplazamiento horizontal

Siga los pasos a continuación para implementar el desplazamiento horizontal en un widget de texto:

Paso 1: crea un nuevo proyecto flutter en Android Studio .

Paso 2: Haz el diseño usando widgets

Vaya al archivo main.dart y consulte el siguiente código. A continuación se muestra el código para el archivo main.dart .

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      //adding App Bar
      appBar: AppBar(
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
        title: Text(
          "GeeksForGeeks",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // adding margin
          
        margin: const EdgeInsets.all(15.0),
        // adding padding
          
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            
          // adding borders around the widget
          border: Border.all(
            color: Colors.blueAccent,
            width: 5.0,
          ),
        ),
        // SingleChildScrollView should be
        // wrapped in an Expanded Widget
        child: Expanded(
            
          //contains a single child which is scrollable
          child: SingleChildScrollView(
              
            //for horizontal scrolling
            scrollDirection: Axis.horizontal,
            child: Text(
              "GeeksForGeeks is a good platform to learn programming."
              " It is an educational website.",
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
                letterSpacing: 3,
                wordSpacing: 3,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Producción:

Ejemplo 2: desplazamiento vertical

Para el desplazamiento vertical del texto, siga los pasos 1 y 2 del primer ejemplo y cambie la dirección de desplazamiento a vertical como se muestra a continuación:

scrollDirection: Axis.vertical

El archivo main.dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        
      // adding App Bar
      appBar: AppBar(
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
        title: Text(
          "GeeksForGeeks",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          
        // adding margin
        margin: const EdgeInsets.all(15.0),
          
        // adding padding
        padding: const EdgeInsets.all(3.0),
          
        // height should be fixed for vertical scrolling
        height: 80.0,
        decoration: BoxDecoration(
            
          // adding borders around the widget
          border: Border.all(
            color: Colors.blueAccent,
            width: 5.0,
          ),
        ),
        // SingleChildScrollView should be
        // wrapped in an Expanded Widget
        child: Expanded(
            
          // SingleChildScrollView contains a
          // single child which is scrollable
          child: SingleChildScrollView(
              
            // for Vertical scrolling
            scrollDirection: Axis.vertical,
            child: Text(
              "GeeksForGeeks is a good platform to learn programming."
                  " It is an educational website.",
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
                letterSpacing: 3,
                wordSpacing: 3,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Producción: