List and add

Write a list and FloatingActionButton add flow.

Note list with ListView

To list the notes on screen you use ListView.builder. The itemCount is the number of notes, and the itemBuilder produces the widget for each row. You typically show a ListTile for each note.

ListView.builder(
  itemCount: notlar.length,
  itemBuilder: (context, index) {
    final n = notlar[index];
    return ListTile(title: Text(n.baslik));
  },
)

Adding with FloatingActionButton

You use a FloatingActionButton to start the new note flow. Inside onPressed you go to the add screen with Navigator.push; when that screen returns you add the new note to the list.

FloatingActionButton(
  onPressed: () async {
    final yeniNot = await Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => EklemeEkrani()),
    );
    if (yeniNot != null) {
      // add to list
    }
  },
  child: const Icon(Icons.add),
)

Exercise List notes with ListView

Define a StatelessWidget named NotlarEkrani with a required final List<Note> notlar field. Its build method should return a Scaffold whose body is a ListView.builder with itemCount set to notlar.length and itemBuilder returning ListTile(title: Text(n.baslik)) for each row. Print 'hazir' in main.

Show example solution

import 'package:flutter/material.dart';

class Note {
  final String id;
  final String baslik;
  final String icerik;
  Note(this.id, this.baslik, this.icerik);
}

class NotlarEkrani extends StatelessWidget {
  final List<Note> notlar;
  const NotlarEkrani({super.key, required this.notlar});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Notlar')),
      body: ListView.builder(
        itemCount: notlar.length,
        itemBuilder: (context, index) {
          final n = notlar[index];
          return ListTile(title: Text(n.baslik));
        },
      ),
    );
  }
}

void main() {
  print('hazir');
}

Test yourself

What does the itemCount parameter of ListView.builder specify?
- The font size of each row
- The animation duration
- The number of notes
- The height of the list
Show answer

The number of notes — itemCount specifies how many rows the list will display. Height, font size, and animation duration are unrelated to itemCount.

The Navigator.push call

final sonuc = await Navigator.____(
  context,
  MaterialPageRoute(builder: (_) => EklemeEkrani()),
);

Show answer

final sonuc = await Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => EklemeEkrani()),
);

List and add parts

ListView.builder

Note list
itemCount

Row count
FloatingActionButton

Add button
Navigator.push

Opening a new screen

Next lesson: Edit screen

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies