UI as Code

The Dart & Flutter teams are creating great support for capturing user interface code using Dart, without needing a markup language.  a single language for both behavior and layout has large benefits. These include reducing context switching, not having to learn two languages, and allowing all of the abstraction features of a general-purpose programming language when building your UI. in windows (WPF) we are always dealing with XAML and C# the same is true with HTML and Javascript unless one generates the UI entirely from JS which is possible but rare . so here are the new features:

a new spread operator feature for unpacking the elements from one list into another. In the following example, buildMainElements() returns a list of widgets, which is then unpacked into the surrounding list using the spread operator :

Widget build(BuildContext context) {
  return Column(children: [
   Header(),
    ...buildMainElements(),
    Footer(),
  ]);
}

Collection if  (directly in the collection)

Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    if (page != pages.last)
      FlatButton(child: Text('Next')),
  ]);
}


Collection For

Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
for (var section in sections)
     HeadingAction(section.heading),
  ]);
} 

Now we can do all these operations now but these collection language features can make our code more declarative and thus more readable.  for a much more detailed article see Bob Nystrom blog

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar