Flutter 2: From List null safety使用mapIndex创建子行

Question

自从更新了空安全的颤动后，我对发生的事情一无所知。

我试图从一个孩子的列表中创建一排图标，但没有成功(这里的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

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

第二个是null的验证。我不知道这是不是更好的解决方案，但这里是我检查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()
      ),
    );
  }
}

Answer 2

对于null安全，首先检查变量是否为null。

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()
      ),
    );
  }
}