Flutter - Dynamic page design based on a XML file (over a REST API)

Question

I have worked with dart and flutter for a few months. I need a little support regarding to the following task and how to start a project like this/ how to find a solution.

The aim is to develop Flutter as an application which gets the page structure of every page from the XML file. The page is structured in sections and those are structured in columns and rows. The app has predefined standard styles (styles for buttons labels etc...) which are callable in the XML file with the name.

The following example represents how a section in the XML file could look like.

<SectionTop>
<Column1>
 <Row1>
  <label>
    <title>label text</title>
    <algin>center</algin>
    </style>defaultLabelStyle</style>
  </label>
 </Row1>
 <Row2>
  <Button>
    <title>add Customer</title>
    <algin>center</algin>
    </style>defaultButton_Blue</style>
  </Button>
 </Row2>
</Column1>
</SectionTop>

I hope you can help me, thanks in advance:)

Answer 1

There is a package called Dynamic Widget however it uses its own schema and is json. If you are wanting control over the xml yourself and its schema then you will need to build something like the Dynamic Widget package

There is also Xml Layout package that could get you started in thinking of how to put it together.

And also Flutter XML Layout Helper

There is also a plugin for VSCode which you could look at as to how it is done

Answer 2

You can use this package

https://pub.dev/packages/xml

To read xml from file

final document = XmlDocument.parse(File('bookshelf.xml').readAsStringSync());

To read xml from api

//get response string user http or dio package
final document = XmlDocument.parse(responseString);

elements on the xml document can be iterated and widgets can be populated in build method as follows

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: _getChildren(document.descendants),
      ),
    );
  }

  _getChildren(Iterable<XmlNode> descendants) {
    List<Widget> widgets = List();
    for (XmlNode node in descendants) {
      if (node.text == 'Column') {
        widgets.add(Column(
          children: _getChildren(node.descendants),
        ));
      } else if (node.text == 'Row') {
        widgets.add(Row(
          children: _getChildren(node.descendants),
        ));
      } else if (node.text == 'label') {
        String text = node.descendants
            .firstWhere((element) => element.text == 'title')
            .innerText;
        String align = node.descendants
                .firstWhere((element) => element.text == 'align')
                .innerText ??
            'center';

        widgets.add(Text(text,
            textAlign: align == 'center'
                ? TextAlign.center
                : align == 'start'
                    ? TextAlign.start
                    : TextAlign.end));
      }
      //add more if else for other elements
    }
    return widgets;
  }