Flutter: How to hide TableRow if the value is null or there is no value

user_11189968 0
Viewed 1236

I have 2 JSON cases as follows

Case 1: one value of "country" is null

[
  {
    "id": 1,
    "continent": "North America",
    "country": "United States"
  },
  {
    "id": 2,
    "continent": "Europe",
    "country": "Germany"
  },
  {
    "id": 3,
    "continent": "Asia",
    "country": null
  }
]

Case 2: one of "country" has no value

[
  {
    "id": 1,
    "continent": "North America",
    "country": "United States"
  },
  {
    "id": 2,
    "continent": "Europe",
    "country": "Germany"
  },
  {
    "id": 3,
    "continent": "Asia"
  }
]

I use TableRow to show "continent" and "country" in Table, 

TableRow(children: [
                      TableCell(child: Text(continent.continent)), 
                      TableCell(child: Text(continent.country))])

But in case there isn't "country" in List or continent.country == null => I don't want to show that TableRow, so please help me set the conditions for:

  1. Case 1
  2. Case 2
  3. Case 1 + Case 2

This is the main file:

import 'package:ask/services/continent_services2.dart';
import 'package:flutter/material.dart';
import 'model/continent_model2.dart';

class TableRowDemo extends StatefulWidget {
  TableRowDemo() : super();

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

class _ContinentPageState extends State<TableRowDemo> {
  List<Continent> _continent;

  @override
  void initState() {
    super.initState();

    ContinentServices2.getContinent().then((continents) {
      setState(() {
        _continent = continents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('')),
      body: Column(
        children: <Widget>[
          for (Continent continent in _continent)
            SingleChildScrollView(
              child: Table(children: [
                continent.country == null
                    ? Container() // Error: type 'Container' is not a subtype of type 'TableRow'
                    : TableRow(children: [
                      TableCell(child: Text(continent.continent)),
                      TableCell(child: Text(continent.country))]),
              ]),
            ),
        ],
      ),
    );
  }
}
dart flutter
2 Answers

You should rename continent to 'zone' or 'area' and you can use a simple if condition:

(...)
Table(children: [
    for (Zone zone in zones)
        If (zone.country != null )
            TableRow(children[
                TableCell(child: Text(zone.continent)),
                TableCell(child: Text(zone.country)),
          ])
    )
user_31611390

If you upgraded to latest Flutter SDK (Dart >=2.3) then you can you can use simple if statement to conditionally rendering TableRow or any other widget.

...
If(continent.country != null)
     TableRow(children: [
          TableCell(child: Text(continent.continent)),
          TableCell(child: Text(continent.country))]),
              ]

Here is the full example with implementation of filtering:

import 'package:flutter/material.dart';


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

class TableExample extends StatefulWidget {
  @override
  _TableExampleState createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  List continents = [
    {"id": 1, "continent": "North America", "country": "United States"},
    {"id": 2, "continent": "Europe", "country": "Germany"},
    {"id": 3, "continent": "Asia", "country": null}
  ];
  List _continents = [];



  @override
  void initState() {
    super.initState();

  // filtering of data
    setState(() {
      _continents =
          continents.where((element) => element["country"] != null).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Table Example"),
      ),
      body: Column(
        children: <Widget>[
          for (Map<String, dynamic> continent in _continents)
            SingleChildScrollView(
              child: Table(children: [
                TableRow(children: [
                  TableCell(child: Text(continent["continent"])),
                  TableCell(child: Text(continent["country"]))
                ]),
              ]),
            ),
        ],
      ),
    ));
  }
}

Output:

enter image description here

user_56691200
Related