Lists and grids: ListView, GridView, cards and pull to refresh

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: TransactionsScreen()));

class Txn {
  final String who;
  final int amount;           // positive = received, negative = paid
  final DateTime when;
  const Txn(this.who, this.amount, this.when);
}

final txns = List.generate(
  40,
  (i) => Txn(['Wanjiru', 'Kamau Hardware', 'KPLC Tokens', 'Otieno', 'Naivas'][i % 5], i.isEven ? 500 + i * 35 : -(250 + i * 20),
      DateTime(2026, 9, 30).subtract(Duration(hours: i * 7))),
);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('M-Pesa statement')),
      body: ListView.separated(
        itemCount: txns.length,
        separatorBuilder: (context, i) => const Divider(height: 1),
        itemBuilder: (context, i) {                       // called only for visible rows
          final t = txns[i];
          final received = t.amount > 0;
          return ListTile(
            leading: CircleAvatar(
              backgroundColor: received ? Colors.green.shade100 : Colors.red.shade100,
              child: Icon(received ? Icons.call_received : Icons.call_made, color: received ? Colors.green : Colors.red),
            ),
            title: Text(t.who),
            subtitle: Text('${t.when.day}/${t.when.month} at ${t.when.hour.toString().padLeft(2, '0')}:00'),
            trailing: Text(
              '${received ? '+' : '-'}KSh ${t.amount.abs()}',
              style: TextStyle(fontWeight: FontWeight.bold, color: received ? Colors.green.shade700 : Colors.red.shade700),
            ),
            onTap: () => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Opened ${t.who}'))),
          );
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Scaffold(body: SafeArea(child: CourseList()))));

class Course {
  final String title, level;
  final int lessons;
  final double progress;
  const Course(this.title, this.level, this.lessons, this.progress);
}

const courses = [
  Course('HTML for beginners', 'Beginner', 16, 0.8),
  Course('Flutter app development', 'Intermediate', 15, 0.35),
  Course('Excel for business', 'Beginner', 10, 0.0),
];

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(12),
      itemCount: courses.length,
      itemBuilder: (context, i) => CourseCard(course: courses[i]),
    );
  }
}

class CourseCard extends StatelessWidget {
  final Course course;
  const CourseCard({super.key, required this.course});

  @override
  Widget build(BuildContext context) {
    final text = Theme.of(context).textTheme;
    return Card(
      clipBehavior: Clip.antiAlias,               // so the InkWell ripple stays inside the rounded corners
      margin: const EdgeInsets.only(bottom: 12),
      child: InkWell(                              // makes the whole card tappable, with a ripple
        onTap: () {},
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(course.title, style: text.titleMedium),
              const SizedBox(height: 4),
              Text('${course.level} · ${course.lessons} lessons', style: text.bodySmall),
              const SizedBox(height: 12),
              LinearProgressIndicator(value: course.progress, minHeight: 6, borderRadius: BorderRadius.circular(3)),
              const SizedBox(height: 6),
              Text(course.progress == 0 ? 'Not started' : '${(course.progress * 100).round()}% done', style: text.labelSmall),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Scaffold(body: ProductGrid())));

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

  @override
  Widget build(BuildContext context) {
    final items = ['Tomatoes', 'Onions', 'Sukuma', 'Cabbage', 'Carrots', 'Avocado', 'Mangoes', 'Bananas'];
    return GridView.builder(
      padding: const EdgeInsets.all(12),
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,        // each tile at most 200 wide: 2 columns on phones, more on tablets
        mainAxisSpacing: 12,
        crossAxisSpacing: 12,
        childAspectRatio: 3 / 4,        // width : height
      ),
      itemCount: items.length,
      itemBuilder: (context, i) => Card(
        child: Column(
          children: [
            Expanded(child: Container(color: Colors.green.shade100, child: const Center(child: Icon(Icons.eco, size: 48)))),
            Padding(padding: const EdgeInsets.all(8), child: Text(items[i], style: const TextStyle(fontWeight: FontWeight.bold))),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: OrdersScreen()));

class OrdersScreen extends StatefulWidget {
  const OrdersScreen({super.key});
  @override
  State<OrdersScreen> createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  List<String>? orders;          // null = still loading
  String? error;

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

  Future<void> load() async {
    try {
      await Future.delayed(const Duration(seconds: 1));      // pretend network call
      final result = ['Order 1042 · KSh 1,240', 'Order 1041 · KSh 560'];
      if (!mounted) return;                                  // the screen may have closed meanwhile
      setState(() { orders = result; error = null; });
    } catch (e) {
      if (!mounted) return;
      setState(() => error = 'Could not load orders. Check your internet.');
    }
  }

  @override
  Widget build(BuildContext context) {
    Widget body;
    if (error != null) {
      body = Center(child: Column(mainAxisSize: MainAxisSize.min, children: [
        Text(error!), const SizedBox(height: 8), OutlinedButton(onPressed: load, child: const Text('Try again')),
      ]));
    } else if (orders == null) {
      body = const Center(child: CircularProgressIndicator());
    } else if (orders!.isEmpty) {
      body = const Center(child: Text('No orders yet'));
    } else {
      body = RefreshIndicator(                              // pull down to reload
        onRefresh: load,
        child: ListView.builder(
          physics: const AlwaysScrollableScrollPhysics(),   // lets you pull even when the list is short
          itemCount: orders!.length,
          itemBuilder: (context, i) => ListTile(leading: const Icon(Icons.receipt_long), title: Text(orders![i])),
        ),
      );
    }
    return Scaffold(appBar: AppBar(title: const Text('Orders')), body: body);
  }
}

Dismissible(
  key: ValueKey(item.id),
  direction: DismissDirection.endToStart,
  background: Container(color: Colors.red, alignment: Alignment.centerRight,
      padding: const EdgeInsets.only(right: 20), child: const Icon(Icons.delete, color: Colors.white)),
  onDismissed: (_) => setState(() => items.remove(item)),
  child: ListTile(title: Text(item.name)),
)

itemCount: items.length + (hasMore ? 1 : 0),
itemBuilder: (context, i) {
  if (i == items.length) {          // the extra last row
    loadNextPage();                 // guard with an isLoading flag so it runs once
    return const Padding(padding: EdgeInsets.all(16), child: Center(child: CircularProgressIndicator()));
  }
  return ListTile(title: Text(items[i].name));
},