Aleteo – Efecto dominó

En Flutter, el widget InkWell se usa para realizar una animación ondulada cuando se toca. Este efecto es común para todos los componentes de la aplicación que siguen la guía de diseño de materiales. Una animación ondulada en su término más simple puede entenderse como una barra negra (predeterminada) en la parte inferior de una aplicación que muestra algunos datos cuando se toca el componente respectivo de la aplicación.

Comprendamos mejor estos efectos dominó usando una aplicación simple. Para crear una aplicación de este tipo, siga los pasos a continuación:

• Cree un widget simple que se pueda tocar.
• Use el widget InkWell para agregar devolución de llamada en la acción de toque.

Vamos a discutirlos en detalle.

Creando un widget simple:

Vamos a crear un widget simple que tenga un botón que se pueda tocar usando el siguiente código:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text(' Button'),
  ),

Usando el widget InkWell:

Ahora envuelva el widget que acabamos de crear arriba con el widget InkWell como se muestra a continuación:

InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text('Button'),
  ),
);

Ahora construyamos la aplicación completa a partir del código fuente que se proporciona a continuación.

Código fuente completo:

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
  
    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  final String title;
  
  MyHomePage({Key key, this.title}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: Center(child: MyButton()),
    );
  }
}
  
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text('Hello Geeks!'),
        ));
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        color: Colors.green,
        child: Text(' Button'),
      ),
    );
  }
}

Producción: