空にできるフィールド

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 14/33。

すべての連絡先にメールアドレスがあるとは限りません。何も持たない可能性のあるフィールドは、型の後に ? を付け、その値は何も指定されていない場合 null になります。

class Contact {
  final String name;
  final String? email;

  Contact({required this.name, this.email});
}

required がなければ、email: は省略できます。Contact(name: 'Alan Turing') の email は null になります。

null に対してメソッドを呼び出すことはできないため、Dart は contact.email.toLowerCase() と書くのを防ぎます。ドットの代わりに ?. を書きます。contact.email?.toLowerCase() はメールアドレスがある場合にメソッドを呼び出し、ない場合は null を返します。次に、?? で代替値を選びます。

Text(contact.email?.toLowerCase() ?? 'No email')

チャレンジ

簡単

メールアドレスには大文字が混在して入力されており、Alanにはメールアドレスがありません。各タイルに、メールアドレスを小文字で表示するsubtitle:を指定し、メールアドレスがない場合はNo emailを表示してください。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final List<Contact> contacts = [
      Contact(name: 'Ada Lovelace', email: 'Ada@Example.com'),
      Contact(name: 'Alan Turing'),
      Contact(name: 'Grace Hopper', email: 'GRACE@NAVY.MIL'),
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: [
            for (Contact contact in contacts)
              ListTile(
                title: Text(contact.name),
              ),
          ],
        ),
      ),
    );
  }
}

class Contact {
  final String name;
  final String? email;

  Contact({required this.name, this.email});
}