Parth Chauhan's blog
Dart List: Code as UI

Dart List: Code as UI

Parth Chauhan's photo
Parth Chauhan
·

2 min read

In Dart, you can use lists to represent user interface (UI) elements, especially when building dynamic UIs. Lists can store widgets or UI components, allowing you to iterate over them and render them dynamically. This is commonly done in Flutter, a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

Here's a simple example demonstrating how you can use lists to define UI elements in Dart code (specifically Flutter):

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('List UI Example'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('John Doe'),
              subtitle: Text('Software Engineer'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Jane Smith'),
              subtitle: Text('UI/UX Designer'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Alex Johnson'),
              subtitle: Text('Mobile Developer'),
            ),
          ],
        ),
      ),
    );
  }
}

In this example:

  • We import flutter/material.dart to use Flutter widgets.

  • We define a MyApp class that extends StatelessWidget.

  • In the build method, we return a MaterialApp widget.

  • Inside the MaterialApp, we define a Scaffold with an AppBar and a body.

  • The body contains a ListView widget with a list of ListTile widgets.

  • Each ListTile represents a user in the list, containing a leading icon, a title, and a subtitle.

You can easily extend this example by populating the list dynamically using data from an API or any other data source. Lists in Dart are flexible and powerful tools for building dynamic UIs in Flutter applications.

Dart