Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ismanong opened this issue Mar 2, 2023 · 1 comment
Open

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

ismanong opened this issue Mar 2, 2023 · 1 comment

Comments

@ismanong
Copy link

ismanong commented Mar 2, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants