hnvn / flutter_shimmer

A package provides an easy way to add shimmer effect in Flutter project
BSD 3-Clause "New" or "Revised" License
1.77k stars 200 forks source link

It's not a bug, ask a question! #66

Open ismanong opened 1 year ago

ismanong commented 1 year ago

Thanks for the library. I have a question to ask you.

I want to combine two components to make a progress bar with Shimmer.

But the child property received by Shimmer.fromColors must require a Container with color, and the Container will inherit the size of the parent. Probably related to the filter.

It's not elegant to write it this way, I'd rather pass a SizedBox() when overlaying, e.g. Shimmer.fromColors( baseColor: pColor, highlightColor: Colors.white70, child: SizedBox(), ),

Can you tell me the reason why I can't use SizedBox().

import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:shimmer/shimmer.dart';

class MyLineProgress extends StatelessWidget {
  final double percent; // 0.0 - 1.0
  final double height;
  final Color? progressColor;
  const MyLineProgress({
    super.key,
    this.progressColor,
    this.height = 3.0,
    required this.percent,
  });

  @override
  Widget build(BuildContext context) {
    final pColor = progressColor ?? Theme.of(context).primaryColor;
    final pFlex1 = (percent * 100).toInt();
    final pFlex2 = 100 - pFlex1;
    return SizedBox(
      height: height,
      child: Stack(
        children: [
          LinearPercentIndicator(
            padding: const EdgeInsets.all(0),
            animation: true,
            animationDuration: 2500,
            animateFromLastPercent: true,
            percent: percent,
            lineHeight: height,
            progressColor: pColor,
          ),
          Row(
            children: [
              if (pFlex1 != 0)
                Flexible(
                  flex: pFlex1,
                  child: Shimmer.fromColors(
                    baseColor: pColor,
                    highlightColor: Colors.white70,
                    // child: Container(color: Colors.red), 
                    child: const Material(
                      color: Colors.red,
                      child: SizedBox.expand(),
                    ),
                  ),
                ),
              Flexible(flex: pFlex2, child: const SizedBox()),
            ],
          ),
        ],
      ),
    );
  }
}
chstuder commented 10 months ago

Do you have any updates on this? The usage with SizedBox instead of a Widget with Color would definitely improve readability