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

Question

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?

score 0 · Answer 1 · answered Mar 16 '21 at 07:51

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'),
        ),
      ],
    );
  }
}

score 0 · Answer 2 · answered Mar 16 '21 at 07:51

0

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

answered Mar 16 '21 at 07:51

ToraCode

421
8
19

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

2 Answers2