Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab 07: ListView.builder, Debugging, and Web Services & APIs

In the print dialog, choose "Save as PDF" as the destination.

Operating Systems II - Lab 7

`ListView.builder`, Debugging, and Web Services & APIs

Lazy lists, breakpoint debugging, and consuming REST APIs from Flutter

ListView.builder Recap

Builds only the widgets currently visible on screen , efficient for large or dynamic data
itemCount should always be tied to the actual list length, never a hard-coded number
A mismatched itemCount throws a RangeError , the classic index-out-of-range crash

dart

ListView.builder(
  itemCount: courses.length,
  itemBuilder: (context, index) => CourseCard(course: courses[index]),
)

itemCount bound to courses.length, never a literal.

Extracting Row Widgets

Extract each list row into its own StatelessWidget rather than building it inline
Benefits: independently testable, has its own rebuild lifecycle, reusable across screens
Prefer a single list of model objects over parallel lists of names and URLs , keeps data in sync automatically

dart

// course_card.dart
class CourseCard extends StatelessWidget {
  final String name;
  const CourseCard({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(title: Text(name)),
    );
  }
}

The row becomes a reusable, independently testable widget.

Reading the Error Log

On a crash, read the Run tab log first , don't guess

Red screen

or error

Open Run tab

Find the exception message

Find file : line in the stack trace

Click to open that file

Identify the null or bad value

Error text	Likely cause
`The method was called on null`	A variable is `null` before a method/getter is called on it
`RangeError: Invalid value ... index`	`itemCount` is larger than the list length
`type 'Null' is not a subtype of type 'String'`	A field expected to be non-null arrived as `null` from JSON

Breakpoints and Debug Mode

Click the editor gutter next to a line to set a breakpoint (red dot)
Start the app with the Debug button, not the normal Run button
Execution pauses as soon as it reaches the breakpoint
Inspect the current values of all local variables in the Variables panel

Button	Action
Resume	Continue until the next breakpoint
Step Over	Execute the current line and move to the next
Step Into	Enter the method called on this line
Step Out	Finish the current method and return to the caller

Worked Example

Tracing a Null Value

The app fetches user data from an API and tries to display user.points
It crashes because points arrives as null
Trace the bug back to its root cause

Set a breakpoint at the line that reads points; confirm it is null in the Variables panel
Use Find Usages (or Ctrl+Click) to locate where points is assigned
Set a breakpoint there too, resume, and inspect the raw JSON map
If points is missing from the JSON, the bug is in the API response, not the Dart code

What Is an API / Web Service?

API: Application Programming Interface , lets one program talk to another programmatically, via code rather than a graphical interface.

Web Service: Software that exists on the web and is made available for other systems to use. All web services are APIs; not all APIs are web services.

	Web Service	API
Must be on the web	Yes	No
Has a standard (REST, SOAP)	Yes	Not required
Data format	Usually JSON or XML	Any

Companies build APIs to monetize access, share data, or connect their own mobile app to their own backend

The HTTP Protocol

Client

app, browser, Postman

HTTP request

Server

hosts the data or service

HTTPS adds encryption on top of HTTP so intercepted traffic stays unreadable
An HTTP client is the library or program that sends requests and receives responses , in Flutter, that's the http package

Fetching Data with the `http` Package

Add http to pubspec.yaml, then run flutter pub get
http.get() is asynchronous , always await it
Check statusCode before using the body

dart

final response = await http.get(Uri.parse('https://dummyjson.com/posts'));
if (response.statusCode == 200) {
  final decoded = json.decode(response.body) as Map<String, dynamic>;
}

http.get() returns a Future<Response>.

Parsing JSON into Models

fromJson factory: A factory constructor that maps a raw JSON Map into a typed Dart model object.

Map each raw JSON item into a typed Dart object

dart

factory PostModel.fromJson(Map<String, dynamic> json) {
  return PostModel(
    id: json['id'] as int,
    title: json['title'] as String,
  );
}

Each field is cast to its expected type.

Three UI States

data arrivesuser taps Retry

Success

Error

Trigger the first fetch from initState, never from inside build , build can run many times and would refire requests endlessly

dart

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

Runs once, when the widget first mounts.

Key Takeaways

ListView.builder renders lazily; always bind itemCount to the real list length
Extract list rows into their own widget classes for testability and reuse
Read the error log and stack trace first, then use breakpoints and the Variables panel to trace null values to their root cause
API and Web Service are related but distinct terms; both rely on the HTTP request/response cycle
The http package plus a fromJson factory is the standard way to fetch and parse REST data in Flutter
Manage Loading, Error, and Success states explicitly, and always kick off network calls from initState

Open this lesson

Mahmoud AbasLab 07: ListView.builder, Debugging, and Web Services & APIs

// course_card.dart class CourseCard extends StatelessWidget { final String name; const CourseCard({super.key, required this.name}); @override Widget build(BuildContext context) { return Card( child: ListTile(title: Text(name)), ); } }

Error text

Likely cause

The method was called on null

A variable is null before a method/getter is called on it

RangeError: Invalid value ... index

itemCount is larger than the list length

type 'Null' is not a subtype of type 'String'

A field expected to be non-null arrived as null from JSON

Button

Action

Resume

Continue until the next breakpoint

Step Over

Execute the current line and move to the next

Step Into

Enter the method called on this line

Step Out

Finish the current method and return to the caller

Web Service

API

Must be on the web

Yes

Has a standard (REST, SOAP)

Yes

Not required

Data format

Usually JSON or XML

Any

ListView.builder, Debugging, and Web Services & APIs

ListView.builder Recap

Extracting Row Widgets

Reading the Error Log

Breakpoints and Debug Mode

Tracing a Null Value

What Is an API / Web Service?

The HTTP Protocol

Fetching Data with the http Package

Parsing JSON into Models

Three UI States

Key Takeaways

Open this lesson

ListView.builder, Debugging, and Web Services & APIs

ListView.builder Recap

Extracting Row Widgets

Reading the Error Log

Breakpoints and Debug Mode

Tracing a Null Value

What Is an API / Web Service?

The HTTP Protocol

Fetching Data with the http Package

Parsing JSON into Models

Three UI States

Key Takeaways

Open this lesson

`ListView.builder`, Debugging, and Web Services & APIs

Fetching Data with the `http` Package

`ListView.builder`, Debugging, and Web Services & APIs

Fetching Data with the `http` Package