Loading States and Skeleton Screensدۆخەکانی بارکردن و شاشەکانی ئێسکەپەیکەر

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(
  const MaterialApp(home: Scaffold(body: Center(child: PriceListDownload()))),
);

class PriceListDownload extends StatefulWidget {
  const PriceListDownload({super.key});

  @override
  State<PriceListDownload> createState() => _PriceListDownloadState();
}

class _PriceListDownloadState extends State<PriceListDownload> {
  static const _totalParts = 10;
  int? _partsDone; // null: the size is not known yet
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    // First second: still connecting, so we cannot say how far we are.
    _timer = Timer(const Duration(seconds: 1), _startCounting);
  }

  void _startCounting() {
    setState(() => _partsDone = 0);
    _timer = Timer.periodic(const Duration(milliseconds: 300), (timer) {
      setState(() => _partsDone = _partsDone! + 1);
      if (_partsDone == _totalParts) timer.cancel();
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double? value = _partsDone == null ? null : _partsDone! / _totalParts;
    return Padding(
      padding: const EdgeInsets.all(24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            value == null
                ? 'Connecting…'
                : 'Price list: ${(value * 100).round()}%',
          ),
          const SizedBox(height: 12),
          LinearProgressIndicator(
            value: value, // null = indeterminate, 0.0 to 1.0 = determinate
            semanticsLabel: 'Downloading the price list',
          ),
          const SizedBox(height: 24),
          const CircularProgressIndicator(semanticsLabel: 'Loading'),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'bazaar_api.dart';

// The real tile and its skeleton use the SAME sizes,
// so nothing jumps when the data arrives.
const double kPictureSize = 56;
const EdgeInsets kTilePadding = EdgeInsets.symmetric(horizontal: 16, vertical: 10);

class ProductTile extends StatelessWidget {
  const ProductTile({super.key, required this.product});

  final Product product;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Padding(
      padding: kTilePadding,
      child: Row(
        children: [
          Container(
            width: kPictureSize,
            height: kPictureSize,
            decoration: BoxDecoration(
              color: colors.primaryContainer,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(Icons.shopping_basket, color: colors.onPrimaryContainer),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(product.name, style: Theme.of(context).textTheme.titleMedium),
                const SizedBox(height: 4),
                Text('${product.price} IQD'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// One grey shape with rounded corners.
class SkeletonBox extends StatelessWidget {
  const SkeletonBox({
    super.key,
    required this.width,
    required this.height,
    this.radius = 8,
  });

  final double width;
  final double height;
  final double radius;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(radius),
      ),
    );
  }
}

/// The shape of a ProductTile, before its data exists.
class ProductTileSkeleton extends StatelessWidget {
  const ProductTileSkeleton({super.key});

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: kTilePadding,
      child: Row(
        children: [
          SkeletonBox(width: kPictureSize, height: kPictureSize), // picture
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SkeletonBox(width: 180, height: 16, radius: 4), // name
                SizedBox(height: 8),
                SkeletonBox(width: 90, height: 14, radius: 4), // price
              ],
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

/// True when the person asked the phone for less motion.
bool motionIsReduced(BuildContext context) =>
    MediaQuery.disableAnimationsOf(context) || // Android: Remove animations
    View.of(context).platformDispatcher.accessibilityFeatures.reduceMotion; // iOS: Reduce Motion

/// Fades its child gently in and out, again and again.
class Pulse extends StatefulWidget {
  const Pulse({super.key, required this.child});

  final Widget child;

  @override
  State<Pulse> createState() => _PulseState();
}

class _PulseState extends State<Pulse> with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 900),
  );

  late final Animation<double> _opacity = Tween<double>(begin: 1.0, end: 0.4)
      .animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (motionIsReduced(context)) {
      _controller.value = 0; // stop, fully visible: a still skeleton
    } else if (!_controller.isAnimating) {
      _controller.repeat(reverse: true); // 0 → 1 → 0 → 1 …
    }
  }

  @override
  void dispose() {
    _controller.dispose(); // stop the ticker before the State goes away
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(opacity: _opacity, child: widget.child);
  }
}

import 'package:flutter/material.dart';

import 'pulse.dart';

/// Sweeps a light band across its child: one band for the whole list.
class Shimmer extends StatefulWidget {
  const Shimmer({super.key, required this.child});

  final Widget child;

  @override
  State<Shimmer> createState() => _ShimmerState();
}

class _ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1200),
  );

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (motionIsReduced(context)) {
      _controller.value = 0; // the band waits off-screen: plain grey
    } else if (!_controller.isAnimating) {
      _controller.repeat(); // 0 → 1, then start again at 0
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return AnimatedBuilder(
      animation: _controller,
      child: widget.child,
      builder: (context, child) => ShaderMask(
        blendMode: BlendMode.srcATop, // paint only on the grey shapes
        shaderCallback: (bounds) => LinearGradient(
          colors: [
            colors.surfaceContainerHighest,
            colors.surface,
            colors.surfaceContainerHighest,
          ],
          stops: const [0.35, 0.5, 0.65],
          transform: _Slide(bounds.width * (_controller.value * 2 - 1)),
        ).createShader(bounds),
        child: child,
      ),
    );
  }
}

/// Moves the gradient sideways by [dx] pixels.
class _Slide extends GradientTransform {
  const _Slide(this.dx);

  final double dx;

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) =>
      Matrix4.translationValues(dx, 0, 0);
}

import 'package:flutter/material.dart';

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

class BakeryScreen extends StatefulWidget {
  const BakeryScreen({super.key});

  @override
  State<BakeryScreen> createState() => _BakeryScreenState();
}

class _BakeryScreenState extends State<BakeryScreen> {
  int _loavesLeft = 120;

  Future<void> _refresh() async {
    await Future<void>.delayed(const Duration(seconds: 1)); // ask the server
    setState(() => _loavesLeft = (_loavesLeft * 0.8).round());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bakery')),
      body: RefreshIndicator(
        onRefresh: _refresh, // must return a Future
        child: ListView(
          physics: const AlwaysScrollableScrollPhysics(), // short list: still pullable
          children: [
            ListTile(
              leading: const Icon(Icons.bakery_dining),
              title: const Text('Loaves left today'),
              trailing: Text('$_loavesLeft'),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

/// Shown when loading failed: what happened, what to do, and a button.
class ErrorView extends StatelessWidget {
  const ErrorView({super.key, required this.message, required this.onRetry});

  final String message;
  final VoidCallback onRetry;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(32),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.wifi_off, size: 48, color: theme.colorScheme.error),
            const SizedBox(height: 16),
            Text(
              'Could not load the products',
              style: theme.textTheme.titleMedium,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            Text(message, textAlign: TextAlign.center),
            const SizedBox(height: 24),
            FilledButton.icon(
              onPressed: onRetry,
              icon: const Icon(Icons.refresh),
              label: const Text('Try again'),
            ),
          ],
        ),
      ),
    );
  }
}

/// Shown when loading worked but there is nothing to show.
class EmptyView extends StatelessWidget {
  const EmptyView({super.key, required this.onRefresh});

  final Future<void> Function() onRefresh;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return RefreshIndicator(
      onRefresh: onRefresh,
      child: ListView(
        physics: const AlwaysScrollableScrollPhysics(), // pull works on a short page
        padding: const EdgeInsets.all(32),
        children: [
          const SizedBox(height: 80),
          Icon(Icons.storefront, size: 48, color: theme.colorScheme.primary),
          const SizedBox(height: 16),
          Text(
            'No products yet',
            style: theme.textTheme.titleMedium,
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 8),
          const Text(
            'The shop has not added anything today. Pull down to check again.',
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'product_tile.dart';
import 'pulse.dart';

/// What the bazaar screen shows while the products are on the way.
class ProductListSkeleton extends StatelessWidget {
  const ProductListSkeleton({super.key});

  @override
  Widget build(BuildContext context) {
    return Semantics(
      container: true,
      liveRegion: true, // screen readers say it even without focus
      label: 'Loading products',
      child: ExcludeSemantics(
        // the grey shapes mean nothing to a screen reader
        child: Pulse(
          child: ListView.builder(
            physics: const NeverScrollableScrollPhysics(),
            itemCount: 6,
            itemBuilder: (context, index) => const ProductTileSkeleton(),
          ),
        ),
      ),
    );
  }
}

/// One product in the bazaar.
class Product {
  const Product({required this.name, required this.price});

  final String name;
  final int price; // Iraqi dinars
}

/// A fake server: no network needed. It waits 2 seconds, then answers.
class FakeBazaarApi {
  bool failNextTime = false; // set to true to see the error state
  bool emptyShop = false; // set to true to see the empty state

  Future<List<Product>> fetchProducts() async {
    await Future<void>.delayed(const Duration(seconds: 2));
    if (failNextTime) {
      failNextTime = false; // fail once, so "Try again" works
      throw Exception('No connection to the bazaar server');
    }
    if (emptyShop) return const [];
    return const [
      Product(name: 'Tea glasses (6)', price: 9000),
      Product(name: 'Mountain honey, 1 kg', price: 25000),
      Product(name: 'Walnuts, 1 kg', price: 14000),
      Product(name: 'Copper teapot', price: 35000),
      Product(name: 'Wool socks', price: 5000),
    ];
  }
}

import 'package:flutter/material.dart';

import 'bazaar_api.dart';
import 'loading_list.dart';
import 'product_tile.dart';
import 'states.dart';

void main() => runApp(BazaarApp(api: FakeBazaarApi()));

class BazaarApp extends StatelessWidget {
  const BazaarApp({super.key, required this.api});

  final FakeBazaarApi api;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bazaar',
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: BazaarScreen(api: api),
    );
  }
}

class BazaarScreen extends StatefulWidget {
  const BazaarScreen({super.key, required this.api});

  final FakeBazaarApi api;

  @override
  State<BazaarScreen> createState() => _BazaarScreenState();
}

class _BazaarScreenState extends State<BazaarScreen> {
  late Future<List<Product>> _products;

  @override
  void initState() {
    super.initState();
    _products = widget.api.fetchProducts(); // start once, never in build
  }

  void _retry() {
    setState(() {
      _products = widget.api.fetchProducts(); // a new Future: loading again
    });
  }

  Future<void> _refresh() async {
    final next = widget.api.fetchProducts();
    setState(() {
      _products = next;
    });
    try {
      await next; // the pull spinner turns until the answer arrives
    } catch (_) {
      // FutureBuilder shows the error screen; nothing more to do here.
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bazaar')),
      body: FutureBuilder<List<Product>>(
        future: _products,
        builder: (context, snapshot) {
          final waiting = snapshot.connectionState != ConnectionState.done;
          final Widget body;
          if (waiting && !snapshot.hasData) {
            body = const ProductListSkeleton(); // first load, or Try again
          } else if (snapshot.hasError) {
            body = ErrorView(
              message: 'Check your internet connection and try again.',
              onRetry: _retry,
            );
          } else if (snapshot.data!.isEmpty) {
            body = EmptyView(onRefresh: _refresh);
          } else {
            body = RefreshIndicator(
              onRefresh: _refresh, // old list stays while it refreshes
              child: ProductList(products: snapshot.data!),
            );
          }
          return AnimatedSwitcher(
            duration: const Duration(milliseconds: 300), // a soft cross-fade
            child: body,
          );
        },
      ),
    );
  }
}

class ProductList extends StatelessWidget {
  const ProductList({super.key, required this.products});

  final List<Product> products;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: const AlwaysScrollableScrollPhysics(),
      itemCount: products.length,
      itemBuilder: (context, index) => ProductTile(product: products[index]),
    );
  }
}

import 'package:bazaar/bazaar_api.dart';
import 'package:bazaar/main.dart';
import 'package:bazaar/product_tile.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('skeleton first, then the products', (tester) async {
    await tester.pumpWidget(BazaarApp(api: FakeBazaarApi()));
    expect(find.byType(ProductTileSkeleton), findsWidgets);
    expect(find.byType(ProductTile), findsNothing);

    await tester.pump(const Duration(seconds: 2)); // the fake server answers
    await tester.pump(const Duration(milliseconds: 300)); // the cross-fade ends
    expect(find.byType(ProductTileSkeleton), findsNothing);
    expect(find.text('Copper teapot'), findsOneWidget);
  });

  testWidgets('error, then Try again', (tester) async {
    await tester.pumpWidget(BazaarApp(api: FakeBazaarApi()..failNextTime = true));
    await tester.pump(const Duration(seconds: 2));
    await tester.pump(const Duration(milliseconds: 300));
    expect(find.text('Try again'), findsOneWidget);

    await tester.tap(find.text('Try again'));
    await tester.pump();
    expect(find.byType(ProductTileSkeleton), findsWidgets); // loading again

    await tester.pump(const Duration(seconds: 2));
    await tester.pump(const Duration(milliseconds: 300));
    expect(find.text('Copper teapot'), findsOneWidget);
  });
}

  void _retryWrong() {
    setState(() => _greeting = loadGreeting()); // WRONG: the arrow returns the Future
  }

  void _retryRight() {
    setState(() {
      _greeting = loadGreeting(); // RIGHT: a block returns nothing
    });
  }