0

Dispongo de un proyecto de Flutter en el que leo el archivo de pubspec.yaml y cargo el contenido obtenido en un Map gracias, entre otras cosas, a la funcionalidad ofrecida por el paquete de yaml.

[./lib/src/providers/file_provider.dart]

import 'package:flutter/services.dart' show rootBundle;
import 'package:yaml/yaml.dart';


class _FileProvider {

  _FileProvider();

  //...

  Future<Map> cargarDataYamlToMap(String fileUrl) async {
    final resp = await rootBundle.loadString(fileUrl);

    Map<dynamic, dynamic> dataMap = loadYaml( resp );

    return dataMap;
  }

}

final fileProvider = _FileProvider();

Luego, el Map obtenido (o, más bien YamlMap), recibido dentro de un FutureBuilder es mandado al método _listaDinamic dónde es recorrido, recursivamente, para llegar a construir un List<Widget> con sus ListTile y/o ExpansionTile según el elemento recorrido sea un par de clave(String)/valor(NO siendo un Map) o un par de clave(String)/valor(siendo Map).

[./lib/src/pages/pub_spec_page.dart]

class PubSpecPage extends StatefulWidget {
  @override
  _PubSpecPageState createState() => _PubSpecPageState();
}

class _PubSpecPageState extends State<PubSpecPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).pubSpecTitle,
        ),

        actions: <Widget>[
          IconButton(
            tooltip: 'EXPAND :: Desplegando Todos',
            icon: Icon(Icons.unfold_more),
            onPressed: () {
              print('EXPAND :: Desplegando Todos');
            },
          ),
          IconButton(
            tooltip: 'COLLAPSE :: Replegando Todos',
            icon: Icon(Icons.unfold_less),
            onPressed: () {
              print('COLLAPSE :: Replegando Todos');
            },
          ),
        ],
      ),

      body: _listaDinamic(),
    );

  }

  Widget _listaDinamic() {
    return FutureBuilder(
      future: fileProvider.cargarDataYamlToMap('pubspec.yaml'),
      builder: ( context, AsyncSnapshot<Map<dynamic, dynamic>> snapShot ) {
        //print(snapShot.data);

        if(snapShot.hasData) {
          return ListView(
            children: _crearItems( snapShot.data, 0 ),
          );

        } else if (snapShot.hasError) { 
          return Text('ERROR: ${snapShot.error}');
        }
        String txtMsg = 'Esperando el resultado...';
        return Text(
          txtMsg,
        );

      },
    );
  }

  List<Widget> _crearItems( Map<dynamic, dynamic> data, int indentLevel, [int indexTile] ) {
    final List<Widget> items = [];

    data.entries.forEach((e) {
      var widgetTemp;

      if( e.value.runtimeType.toString() == 'YamlList' ) {

        //NECESARIO convertir el valor en un List...
        List<dynamic> values = List.from(e.value);
        List<Widget> subItems = [];
        for(var subItem in values) {
            widgetTemp = ListTile(
              leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', (indentLevel+1), 'iconColor' ),),
              title: Text( '$subItem' ),
            );

            if (indentLevel > 0) {
              widgetTemp = Padding(
                padding: EdgeInsets.only(left: languagesProvider.getDoubleOptionByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'paddingLeft' )),
                child: widgetTemp,
              );
            }

            if(widgetTemp != null)
              subItems.add( widgetTemp );
            widgetTemp = null;
        }//for

        widgetTemp = ExpansionTile(
          leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'iconColor' ),),
          title: Text( e.key ),
          children: subItems,
        );

      } else if( e.value.runtimeType.toString() == 'String'
              || e.value.runtimeType.toString() == 'bool'
              || e.value.runtimeType.toString() == 'int'
              || e.value.runtimeType.toString() == 'double' ) {

        widgetTemp = ListTile(
          leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'iconColor' ),),
          title: Text( e.key ),
          subtitle: Text( '${e.value}' ),
        );

      } else {//Siendo YamlMap

        Map<String, dynamic> mapValue;
        if( e.value.runtimeType.toString() == 'YamlMap' ) {
          mapValue = Map<String, dynamic>.from(e.value);
        }

        widgetTemp = ExpansionTile(
          leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'iconColor' ),),
          title: Text( e.key ),
          children: _crearItems( mapValue, (indentLevel + 1), (indexTile) ),
        );

      }//No o Si es YamlMap

      if (indentLevel > 0) {
        widgetTemp = Padding(
          padding: EdgeInsets.only(left: languagesProvider.getDoubleOptionByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'paddingLeft' )),
          child: widgetTemp,
        );
      }

      if(widgetTemp != null)
        items.add( widgetTemp );
    });

    return items;
  }

}

Todo correcto hasta aquí.

Por un lado, lo que pretendo es que al expandir otro ExpansionTile, el anterior que se haya abierto, sea cerrado automáticamente.

En mis búsquedas sobre temas relacionados, he visto cuestiones relacionadas con las propiedades key, initiallyExpanded y onExpansionChanged de los ExpansionTile. Pero no he conseguido lo que pretendía.

He llegado a probar lo que sigue:

  • de primeras, he añadido una nueva propiedad selected en la clase de PubSpecPage y, cuando se recorre el data, he añadido una propiedad key a cada nuevo ListTile y ExpansionTile al que se le asigna un indexTile + 1 para que, supuestamente, cada key de cada elemento sea único.

    class _PubSpecPageState extends State<PubSpecPage> {
    
      int selected = 0;
    
      //...
    
        widgetTemp = ListTile(
          leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', (indentLevel+1), 'iconColor' ),),
          title: Text( '$subItem' ),
          //-----------------------------------------------------
          key: Key((indexTile + 1).toString()),
        );
    
      //...
    
  • luego, en los ExpansionTile, además, añado el initiallyExpanded y el onExpansionChanged:

    //...
    
    indexTile++;
    //-----------------------------------------------------
    widgetTemp = ExpansionTile(
      leading: Icon(Icons.fiber_manual_record, color: languagesProvider.getColorByLanguageCode( actualLanguageCodeConstant, 'indentLevelOptions', indentLevel, 'iconColor' ),),
      title: Text( e.key ),
      children: subItems,
      //-----------------------------------------------------
      key: Key((indexTile).toString()),
      initiallyExpanded : indexTile==selected,
      onExpansionChanged: ((newState){
        if(newState)
          setState(() {
            Duration(seconds:  20000);
            selected = indexTile;
          });
          else setState(() {
            selected = -1;
          });
      }),
    );
    

Pero el resultado de todo esto es el recibir toda esta serie de excepciones:

  • de primeras estas dos excepciones:

    ════════ Exception caught by widgets library ═══════════════════════════════════
    The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(411.4, 683.4), devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, physicalDepth: 1.7976931348623157e+308, alwaysUse24HourFormat: true, accessibleNavigation: false, highContrast: false,disableAnimations: false, invertColors: false, boldText: false)):
    'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 263 pos 16: 'child == null || indexOf(child) > index': is not true.
    
    
    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
    https://github.com/flutter/flutter/issues/new?template=BUG.md
    
    The relevant error-causing widget was
        ListView 
    lib\…\pages\pub_spec_page.dart:81
    When the exception was thrown, this was the stack
    #2      RenderSliverMultiBoxAdaptor._debugVerifyChildOrder 
    package:flutter/…/rendering/sliver_multi_box_adaptor.dart:263
    #3      RenderSliverMultiBoxAdaptor.debugChildIntegrityEnabled=.<anonymous closure> 
    package:flutter/…/rendering/sliver_multi_box_adaptor.dart:238
    #4      RenderSliverMultiBoxAdaptor.debugChildIntegrityEnabled= 
    package:flutter/…/rendering/sliver_multi_box_adaptor.dart:240
    #5      SliverMultiBoxAdaptorElement.performRebuild 
    package:flutter/…/widgets/sliver.dart:1255
    #6      SliverMultiBoxAdaptorElement.update 
    package:flutter/…/widgets/sliver.dart:1191
    ...
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by widgets library ═══════════════════════════════════
    A RenderSliverPadding expected a child of type RenderSliver but received a child of type RenderErrorBox.
    The relevant error-causing widget was
        ListView 
    lib\…\pages\pub_spec_page.dart:81
    ════════════════════════════════════════════════════════════════════════════════
    
  • y, luego, esta excepción repetida 23 de veces seguidas (cantidad de supuestos elementos a construir dentro del List<Widget>):

    ════════ Exception caught by widgets library ═══════════════════════════════════
    'package:flutter/src/widgets/framework.dart': Failed assertion: line 3949 pos 14: 'owner._debugCurrentBuildTarget == this': is not true.
    The relevant error-causing widget was
        ListView 
    lib\…\pages\pub_spec_page.dart:81
    ════════════════════════════════════════════════════════════════════════════════
    

Ojalá alguien tenga pueda suministrar la ayuda necesaria para conseguir el propósito deseado de cerrar el elemento anterior en el momento que se despliega otro.

Por otro lado, en el appBar de la página, he dispuesto dos iconos: uno para expandir todos los ExpansionTile y otro para colapsar todos los ExpansionTile.
¿Alguna idea de cómo llegar a conseguir estas dos funcionalidades de expandir/colapsar todos los ExpansionTile al pulsar el correspondiente icono?

Saludos.

9
  • Divide y vencerás, reduce tu issue a un código simple y corto que se pueda reproducir para poder ayudarte : ) Commented el 23 mar. 2020 a las 2:17
  • No sé de qué manera quieres que divida el asunto. ¿Una pista? ¿Quieres que ponga un ejemplo más simple o qué?
    – zacktagnan
    Commented el 23 mar. 2020 a las 2:50
  • Así es, un ejemplo simple, un main.dart, el error está en el layout, trata de reproducirlo en un proyecto aparte sin tu logica del negocio :) Commented el 23 mar. 2020 a las 2:51
  • Para la siguiente vez, como ahora, que oigo términos como "lógica de negocio", ya no me acuerdo lo que llegue a comprender en su momento. Perdona, pero, de nuevo ¿a qué te refieres, "aparte, sin tu lógica de negocio"? ¿Y qué parte de todo lo que he puesto se refiere al llayout que mencionas?
    – zacktagnan
    Commented el 23 mar. 2020 a las 2:55
  • En resumen, crea un archivo basico con solo el expansiontile que quieres dentro de una lista, con datos basicos, lo mas sencillo posible para poder solucionarlo Commented el 23 mar. 2020 a las 2:57

1 respuesta 1

-1

Ok, para lo que deseas hacer primero vas a tener que crear un ExpansionTile personalizado para que puedas acceder a su State ya que el actual lo tiene privado. Así también crear métodos para ocultar y/o mostrar el tile.

Luego de eso debes crear GlobalKeys y asignarlo a tu nuevo ExpansionTitle, finalmente al momento de que seleccionas uno , verificar los demás y cerrarlos.

Aquí te dejo el código completo.

AppExpansionTitle Widget

const Duration _kExpand = const Duration(milliseconds: 200);

class AppExpansionTile extends StatefulWidget {
  const AppExpansionTile({
    Key key,
    this.leading,
    @required this.title,
    this.backgroundColor,
    this.onExpansionChanged,
    this.children: const <Widget>[],
    this.trailing,
    this.initiallyExpanded: false,
  })  : assert(initiallyExpanded != null),
        super(key: key);

  final Widget leading;
  final Widget title;
  final ValueChanged<bool> onExpansionChanged;
  final List<Widget> children;
  final Color backgroundColor;
  final Widget trailing;
  final bool initiallyExpanded;

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

class AppExpansionTileState extends State<AppExpansionTile>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  CurvedAnimation _easeOutAnimation;
  CurvedAnimation _easeInAnimation;
  ColorTween _borderColor;
  ColorTween _headerColor;
  ColorTween _iconColor;
  ColorTween _backgroundColor;
  Animation<double> _iconTurns;

  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: _kExpand, vsync: this);
    _easeOutAnimation =
        CurvedAnimation(parent: _controller, curve: Curves.easeOut);
    _easeInAnimation =
        CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _borderColor = ColorTween();
    _headerColor = ColorTween();
    _iconColor = ColorTween();
    _iconTurns = Tween<double>(begin: 0.0, end: 0.5).animate(_easeInAnimation);
    _backgroundColor = ColorTween();

    _isExpanded =
        PageStorage.of(context)?.readState(context) ?? widget.initiallyExpanded;
    if (_isExpanded) _controller.value = 1.0;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void expand() {
    _setExpanded(true);
  }

  void collapse() {
    _setExpanded(false);
  }

  void toggle() {
    _setExpanded(!_isExpanded);
  }

  void _setExpanded(bool isExpanded) {
    if (_isExpanded != isExpanded) {
      setState(() {
        _isExpanded = isExpanded;
        if (_isExpanded)
          _controller.forward();
        else
          _controller.reverse().then<void>((value) {
            setState(() {
              // Rebuild without widget.children.
            });
          });
        PageStorage.of(context)?.writeState(context, _isExpanded);
      });
      if (widget.onExpansionChanged != null) {
        widget.onExpansionChanged(_isExpanded);
      }
    }
  }

  Widget _buildChildren(BuildContext context, Widget child) {
    final Color borderSideColor =
        _borderColor.evaluate(_easeOutAnimation) ?? Colors.transparent;
    final Color titleColor = _headerColor.evaluate(_easeInAnimation);

    return Container(
      decoration: BoxDecoration(
          color: _backgroundColor.evaluate(_easeOutAnimation) ??
              Colors.transparent,
          border: Border(
            top: BorderSide(color: borderSideColor),
            bottom: BorderSide(color: borderSideColor),
          )),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconTheme.merge(
            data: IconThemeData(color: _iconColor.evaluate(_easeInAnimation)),
            child: ListTile(
              onTap: toggle,
              leading: widget.leading,
              title: DefaultTextStyle(
                style: Theme.of(context)
                    .textTheme
                    .subhead
                    .copyWith(color: titleColor),
                child: widget.title,
              ),
              trailing: widget.trailing ??
                  RotationTransition(
                    turns: _iconTurns,
                    child: const Icon(Icons.expand_more),
                  ),
            ),
          ),
          ClipRect(
            child: Align(
              heightFactor: _easeInAnimation.value,
              child: child,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    _borderColor.end = theme.dividerColor;
    _headerColor
      ..begin = theme.textTheme.subhead.color
      ..end = theme.accentColor;
    _iconColor
      ..begin = theme.unselectedWidgetColor
      ..end = theme.accentColor;
    _backgroundColor.end = widget.backgroundColor;

    final bool closed = !_isExpanded && _controller.isDismissed;
    return AnimatedBuilder(
      animation: _controller.view,
      builder: _buildChildren,
      child: closed ? null : Column(children: widget.children),
    );
  }
}

Sample Widget

class MySample extends StatefulWidget {
  @override
  _MySampleState createState() => _MySampleState();
}

class _MySampleState extends State<MySample> {
  List<GlobalKey<AppExpansionTileState>> _keys =
      List.generate(dataEntry.length, (_) => GlobalKey());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: dataEntry.length,
        itemBuilder: (_, index) {
          final entry = dataEntry[index];
          if (entry.children == null || entry.children.isEmpty) {
            return ListTile(
              title: Text(entry.title),
              subtitle: Text(entry.subTitle),
            );
          }
          return _buildTiles(entry, index);
        },
      ),
    );
  }

  Widget _buildTiles(Entry root, int index) {
    if (root.children.isEmpty) return ListTile(title: Text(root.title));
    return AppExpansionTile(
      key: index != -1 ? _keys[index] : null,
      onExpansionChanged: (val) {
        // Si es el parent
        if (root.idParent == -1 && val && index != -1) {
          //Cerrar los otros
          for (Entry item in dataEntry) {
            if (item.id != root.id) {
              for (int i = 0; i < _keys.length; i++) {
                if (i != index && _keys[i].currentState != null) {
                  print("i :$i .. ${_keys[i]}");
                  _keys[i].currentState.collapse();
                }
              }
            }
          }
        }
      },
      title: Text(root.title),
      children:
          root.children.map((subItem) => _buildTiles(subItem, -1)).toList(),
    );
  }
}

Para expandir todos

void _expandAll() { 
  for (int i = 0; i < _keys.length; i++) { 
      if(_keys[i].currentState != null)
        _keys[i].currentState.expand(); 
  } 
}

Para contraer todos

void _colapseAll() { 
  for (int i = 0; i < _keys.length; i++) { 
      if(_keys[i].currentState != null)
        _keys[i].currentState.collapse(); 
  } 
}
1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Pikoh
    Commented el 30 mar. 2020 a las 8:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.