es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo eliminar el relleno/espacio innecesario debajo del indicador de progreso en percent_indicator Flutter.

Cómo eliminar el relleno/espacio innecesario debajo del indicador de progreso en percent_indicator Flutter.

02 Aug, 2023 Programación

Plugin Flutter: percent_indicator: ^3.4.0

Problema de Github

Vista previa

Quiero lograr Lo que tengo Espacio innecesario abajo
Descripción de la imagen Dos Tres

Quiero eliminar el espacio innecesario debajo de la imagen como se muestra en la tercera columna.

Código


CircularPercentIndicator(
radius: getProportionateScreenWidth(200),
lineWidth: 10,
animation: true,
arcType: ArcType.HALF,
percent: 0.5,
arcBackgroundColor: Colors.grey.withOpacity(0.3),
startAngle: 270,
circularStrokeCap: CircularStrokeCap.round,
progressColor: Theme.of(context).primaryColor,
footer: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'78',
),
Text(
'Perdió ~ 4 kg',
),
Text(
'72',
),
],
),
center: Column(
children: [
Text(
'ahora',
),
Text(
'74.5 Kg',
style: kTextStyle,),
],
),
),

Nota: Los estilos se eliminan del código por simplicidad – el código completo está disponible aquí

Solución alternativa

  • Se puede lograr mediante el uso de un widget posicionado dentro de un stack, pero quiero una solución mejor que elimine este espacio.
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar el espacio innecesario debajo de la imagen, puedes envolver el widget CircularPercentIndicator dentro de un widget SizedBox y configurar su propiedad height con el mismo valor que la propiedad radius del widget CircularPercentIndicator. Aquí está el código actualizado:

    SizedBox(
  height: getProportionateScreenWidth(200),
  child: CircularPercentIndicator(
    radius: getProportionateScreenWidth(200),
    lineWidth: 10,
    animation: true,
    arcType: ArcType.HALF,
    percent: 0.5,
    arcBackgroundColor: Colors.grey.withOpacity(0.3),
    startAngle: 270,
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Theme.of(context).primaryColor,
    footer: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text(
          '78',
        ),
        Text(
          'Dropped ~ 4 kg',
        ),
        Text(
          '72',
        ),
      ],
    ),
    center: Column(
      children: [
        Text(
          'ahora',
        ),
        Text(
          '74.5 Kg',
          style: kTextStyle,
        ),
      ],
    ),
  ),
),

    Esto eliminará el espacio innecesario debajo de la imagen.

Comments are closed.