widgetIndicator issues

[sefidgaran]

Hello,

I am trying to add my widget as widgetIndicator in the LinearPercentIndicator widget but I see two issues:

1- In the first load after running the app it won't show my widgetIndicator and it just shown the animated line.

2- After loading the page for second time it will display my widgetIndicator but with wrong alignment, vertical alignment is not centered aligned with the line.

Note: my widgetIndicator is a statelessWidget including a Stack of three Image.asset .

Please advise.
Thanks

[diegoveloper]

Add minimum code to reproduce the issue

[sefidgaran]

The sample code:

Expanded( child: Padding( padding: const EdgeInsets.only(left: 15.0, right: 35.0), child: Column( children: [ LinearPercentIndicator( padding: const EdgeInsets.all(0.0), isRTL: false, animation: true, lineHeight: 8.0, curve: Curves.fastOutSlowIn, animationDuration: 1000, percent: percentage / 100, progressColor: DefaultColorPalette.primaryAction, backgroundColor: Colors.white.withOpacity(0.10), linearStrokeCap: percentIndicator.LinearStrokeCap.roundAll, widgetIndicator: _myImagesWidget(), ), // Other widgets ])))

_myImagesWidget is statelesswidget including:
Image sizes are equaly width: 68, height: 26 in 1x

Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset('image1.png'),
        Image.asset('image2.png'),
        Image.asset('image3.png'),
      ],
    );
  }

[diegoveloper]

Use code that I could run on my local. Minimum sample code.

[sefidgaran]

import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LinearPercentIndicator(
              key: GlobalKey(),
              padding: const EdgeInsets.all(0.0),
              isRTL: false,
              animation: true,
              lineHeight: 8.0,
              curve: Curves.fastOutSlowIn,
              animationDuration: 1000,
              percent: 50 / 100,
              progressColor: Colors.green,
              backgroundColor: Colors.white.withOpacity(0.10),
              linearStrokeCap: LinearStrokeCap.roundAll,
              widgetIndicator: Image.asset('resources/images/greyhoundrunner_green.png'),
            ),
          ],
        ),
      ),
    );
  }
}

[sefidgaran]

Hi @diegoveloper
Thanks for following up.

I created the sample code which you can see in previous post.

greyhoundrunner_green.png size is height: 26, width: 68 pixels in 1x resolution

when you run the app at first the widgetIndicator (image) won't be displayed but if you hot reload you can see it is displayed but with wrong alignment.
Screenshots:

[diegoveloper]

I tried using widgetIndicator: Icon(Icons.access_alarm), instead of your image and it works fine. Can you try with it?
What's the size of your image?

[sefidgaran]

As I mentioned before the size of my image is height: 26, width: 68 pixels in 1x resolution, also I attached the image previously.
I tried using Icon the issue regarding displaying at first load is gone but the alignment has problem and its not centered.'

So, the issue is still there basically, It should b able to recieve any widget in widgetIndicator.

[aboo]

I managed to solve the issue of indicator's location using the a container's transform like this:

   var indicator = Container(
      transform: Matrix4.translationValues(0, -6, 0),
      child: Icon(Icons.alarm_add_rounded),
    );

[sefidgaran]

Thanks @aboo for the clue.

Solved the first time load image and image alignment issues by adding width, height and translation to the container as below:

var indicator = Container(
      width: 58,
      height: 24,
      transform: Matrix4.translationValues(0, -6, 0),
      child: Image.asset('resources/images/greyhoundrunner_green.png'),
    );

and then the usage in the LinearPercentIndicator would be like this:

LinearPercentIndicator(
              padding: const EdgeInsets.all(0.0),
              isRTL: false,
              animation: true,
              lineHeight: 8.0,
              curve: Curves.fastOutSlowIn,
              animationDuration: 1000,
              percent: 50 / 100,
              progressColor: Colors.green,
              backgroundColor: Colors.white.withOpacity(0.10),
              linearStrokeCap: LinearStrokeCap.roundAll,
              widgetIndicator: indicator,
            ),