Widget de opacidad en Flutter

El widget Opacity que hace que su hijo sea parcialmente transparente. Esta clase colorea a su hijo en un búfer intermedio y luego vuelve a fusionar al hijo en la escena parcialmente transparente. Para valores de opacidad que no sean 0.0 y 1.0, esta clase es relativamente costosa ya que necesita colorear al niño en un búfer intermedio. Para el valor 0.0, el niño simplemente no está coloreado en absoluto. Para el valor 1.0, el niño se colorea sin un búfer intermedio.

Constructores:

Syntax:
Opacity({Key key,
@required double opacity, 
bool alwaysIncludeSemantics: false, 
Widget child})

Propiedades:

  • child: Los widgets debajo de este widget en el árbol.
  • hashCode: El código hash para este objeto.
  • clave: Controla cómo un widget reemplaza a otro widget en el árbol.
  • runtimeType: una representación del tipo de tiempo de ejecución del objeto.
  • opacidad: La fracción para escalar el valor alfa del niño.

Ejemplo:

La imagen de la siguiente aplicación tiene una opacidad de 0,5.

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
 
class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: Image.network(
              'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
              color: Color.fromRGBO(255, 255, 255, 0.5),
              colorBlendMode: BlendMode.modulate
          )
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
 
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
 
  bool shouldReclip(oldClipper) {
    return false;
  }
}

Producción:

Explicación:

  1. Primero inicialice la aplicación principal como un widget sin estado.
  2. En segundo lugar, diseñe el widget principal como desee.
  3. Cree la barra de aplicaciones con el widget de andamio.
  4. Ahora use el widget Image.Network dentro del cuerpo del widget de scaffold.
  5. Finalmente, establece la opacidad usando colorBlendMode .

Publicación traducida automáticamente

Artículo escrito por ddeevviissaavviittaa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *