CODEWITHSUNDEEP
flutter
principemestizo3
principemestizo3

Reputation: 191

Background text in a Flutter list

I am looking for a quick alternative to indicate that the list is blank.

Something quick and easy occurs to me that would be to show a text that always says that it is blank... and when the list has an element, said element is placed above the text making it hide.

That is, the text will be behind the list.

Any solution?

My example code is this: https://pub.dev/packages/flutter_blue/example

             StreamBuilder<List<ScanResult>>(
                stream: FlutterBlue.instance.scanResults,
                initialData: [],
                builder: (c, snapshot) => Column(
                  children: snapshot.data!
                      .where((r) => r.device.name != '')
                      .map(
                        (r) => ScanResultTile(
                          result: r,
                          onTap: () => Navigator.of(context)
                              .push(MaterialPageRoute(builder: (context) {
                            r.device.connect();
                            return DeviceScreen(device: r.device);
                          })),
                        ),
                      )
                      .toList(),
                ),
              ),

Upvotes: 0

Views: 87

Answers (1)

Edeson Bizerril
Edeson Bizerril

Reputation: 1715

Here's a way to do this by adding an optional progress loading, if you prefer you can remove it. If your list has items, it will be built, otherwise the text will be displayed.

StreamBuilder<List<ScanResult>>(
  stream: FlutterBlue.instance.scanResults,
  initialData: [],
  builder: (c, snapshot) {
    if(!snapshot.hasData){
      return CircularProgressIndicator(); 
    }
    final listItems = snapshot.data!.where((r) => r.device.name != '').toList();
    return  listItems.isNotEmpty ? Column(
        children: snapshot.data!
            .map(
              (r) => ScanResultTile(
                result: r,
                onTap: () => Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) {
                  r.device.connect();
                  return DeviceScreen(device: r.device);
                })),
              ),
            )
            .toList(),
        ): const Text("Has no items")
      },
),

Upvotes: 1

Related Questions