Flutter: How to override opacity value inside a child widget?

1.1k Views Asked by At

Is it possible to override the opacity value inside a child widget?

I have a list of items and based on an inactive status I'm making them partially transparent.

ListView.builder(
  itemBuilder:(c,i) {
    if(status) return MyCard(active:status);
    else return Opacity(opacity: 0.5, child: MyCard(active: status);
  },
  itemCount: 5,
);

But now, all the widgets regardless of active or inactive need to show a download button with full visibility.

class MyCard extends StatelessWidget{
  ///
  Widget build(c){
    return Column(
      children:[
        WidgetA(),
        WidgetB(),

        // this should be always fully visible.
        // Can we override the parent's opacity property somehow?
        DownloadButton(), 
      ]
    );
  }
}

Is this behavior possible using Opacity? Or do I need to visit each of the child items separately?

2

There are 2 best solutions below

0
rickimaru On

Wrap WidgetA and WidgetB inside a Column whose parent is Opacity.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <Widget>[
            MyCard(false),
            MyCard(true),
            MyCard(false),
          ],
        ),
      ),
    );
  }
}

class MyCard extends StatelessWidget {
  MyCard(this.status);

  final bool status;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Opacity(
          opacity: status ? 1 : 0.3,
          child: Column(
            children: const <Widget>[
              Text('Widget A'),
              Text('Widget B'),
            ],
          ),
        ),
        TextButton(
          onPressed: () {},
          child: const Text('DL Button'),
        ),
      ],
    );
  }
}
0
ToraCode On

Is this behavior possible using Opacity?

No

Or do I need to visit each of the child items separately?

Yes

You can split your MyCard widget not contain DownloadButton and then Opacity only for MyCard