Flutter 2：从 List null safety create a children row with mapIndex

Question

自从 flutter of null safety 更新后，我对发生的事情一无所知。

我正在尝试从 children 上的列表创建一行图标，但我没有成功（这里不能使用 mapIndex，因为空安全性（而在旧版本中它会起作用））：

import 'package:flutter/material.dart';

class NavigationBar extends StatefulWidget {
  final List<Map<String, dynamic>>? icons;

  const NavigationBar({
    @required this.icons,
    Key? key
  }) : super(key: key);

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

class _NavigationBarState extends State<NavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 40,
      child: Row(
        children: widget.icons.mapIndex((i, icon) {return Container();})
      ),
    );
  }
}

Answer 1

空安全第一，检查变量是否为空。

widget.icons!.map((e) => Container(child: Text(e.keys.toString()),)).toList()

完整代码

import 'package:flutter/material.dart';
class NavigationBar extends StatefulWidget {
  final List<Map<String, dynamic>>? icons;

  const NavigationBar({
    @required this.icons,
    Key? key
  }) : super(key: key);

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

class _NavigationBarState extends State<NavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 40,
      child: Row(
          children: widget.icons!.map((e) => Container(child: Text(e.keys.toString()),)).toList()
      ),
    );
  }
}

Answer 2

第一个问题是缺少集合导入（所以我不能使用 mapIndex）

二是null的验证。我不知道这是否是更好的解决方案，但这里是我检查空值的版本：

import 'package:flutter/material.dart';

import 'package:collection/collection.dart';

class NavigationBar extends StatefulWidget {
  final List<Map<String, dynamic>>? icons;

  const NavigationBar({
    @required this.icons,
    Key? key
  }) : super(key: key);

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

class _NavigationBarState extends State<NavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromARGB(255, 12, 10, 10),
      width: double.infinity,
      height: 40,
      child: Row(
        children: widget.icons == null ? [] :
          widget.icons!.mapIndexed((index, element) =>
          IconButton(
            onPressed: () {},
            icon: widget.icons![0]['icon'],
            color: Colors.white,
          )).toList()
      ),
    );
  }
}

Flutter 2：从 List null safety create a children row with mapIndex

Flutter 2: From List null safety create a children row with mapIndex

list

dart

flutter

dart-null-safety