Add Material 3 `ProgressIndicator` examples (#113950)

examples/api/lib/material/progress_indicator/circular_progress_indicator.0.dart

@@ -6,38 +6,35 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+void main() => runApp(const ProgressIndicatorApp());
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  static const String _title = 'Flutter Code Sample';
+class ProgressIndicatorApp extends StatelessWidget {
+  const ProgressIndicatorApp({super.key});
 
   @override
   Widget build(BuildContext context) {
     return const MaterialApp(
-      title: _title,
-      home: MyStatefulWidget(),
+      home: ProgressIndicatorExample(),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({super.key});
+class ProgressIndicatorExample extends StatefulWidget {
+  const ProgressIndicatorExample({super.key});
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<ProgressIndicatorExample> createState() => _ProgressIndicatorExampleState();
 }
 
-/// [AnimationController]s can be created with `vsync: this` because of
-/// [TickerProviderStateMixin].
-class _MyStatefulWidgetState extends State<MyStatefulWidget>
+class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
     with TickerProviderStateMixin {
   late AnimationController controller;
 
   @override
   void initState() {
     controller = AnimationController(
+      /// [AnimationController]s can be created with `vsync: this` because of
+      /// [TickerProviderStateMixin].
       vsync: this,
       duration: const Duration(seconds: 5),
     )..addListener(() {

examples/api/lib/material/progress_indicator/circular_progress_indicator.1.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// Flutter code sample for [CircularProgressIndicator].
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const ProgressIndicatorApp());
+
+class ProgressIndicatorApp extends StatelessWidget {
+  const ProgressIndicatorApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)),
+      home: const ProgressIndicatorExample(),
+    );
+  }
+}
+
+class ProgressIndicatorExample extends StatefulWidget {
+  const ProgressIndicatorExample({super.key});
+
+  @override
+  State<ProgressIndicatorExample> createState() => _ProgressIndicatorExampleState();
+}
+
+class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
+    with TickerProviderStateMixin {
+  late AnimationController controller;
+  bool determinate = false;
+
+  @override
+  void initState() {
+    controller = AnimationController(
+      /// [AnimationController]s can be created with `vsync: this` because of
+      /// [TickerProviderStateMixin].
+      vsync: this,
+      duration: const Duration(seconds: 2),
+    )..addListener(() {
+        setState(() {});
+      });
+    controller.repeat(reverse: true);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(20.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text(
+              'Circular progress indicator',
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const SizedBox(height: 30),
+            CircularProgressIndicator(
+              value: controller.value,
+              semanticsLabel: 'Circular progress indicator',
+            ),
+            const SizedBox(height: 10),
+            Row(
+              children: <Widget>[
+                Expanded(
+                  child: Text(
+                    'determinate Mode',
+                    style: Theme.of(context).textTheme.titleSmall,
+                  ),
+                ),
+                Switch(
+                  value: determinate,
+                  onChanged: (bool value) {
+                    setState(() {
+                      determinate = value;
+                      if (determinate) {
+                        controller.stop();
+                      } else {
+                        controller..forward(from: controller.value)..repeat();
+                      }
+                    });
+                  },
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/api/lib/material/progress_indicator/linear_progress_indicator.0.dart

@@ -6,38 +6,35 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+void main() => runApp(const ProgressIndicatorApp());
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  static const String _title = 'Flutter Code Sample';
+class ProgressIndicatorApp extends StatelessWidget {
+  const ProgressIndicatorApp({super.key});
 
   @override
   Widget build(BuildContext context) {
     return const MaterialApp(
-      title: _title,
-      home: MyStatefulWidget(),
+      home: ProgressIndicatorExample(),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({super.key});
+class ProgressIndicatorExample extends StatefulWidget {
+  const ProgressIndicatorExample({super.key});
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<ProgressIndicatorExample> createState() => _ProgressIndicatorExampleState();
 }
 
-/// [AnimationController]s can be created with `vsync: this` because of
-/// [TickerProviderStateMixin].
-class _MyStatefulWidgetState extends State<MyStatefulWidget>
+class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
     with TickerProviderStateMixin {
   late AnimationController controller;
 
   @override
   void initState() {
     controller = AnimationController(
+      /// [AnimationController]s can be created with `vsync: this` because of
+      /// [TickerProviderStateMixin].
       vsync: this,
       duration: const Duration(seconds: 5),
     )..addListener(() {

examples/api/lib/material/progress_indicator/linear_progress_indicator.1.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// Flutter code sample for [LinearProgressIndicator].
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const ProgressIndicatorApp());
+
+class ProgressIndicatorApp extends StatelessWidget {
+  const ProgressIndicatorApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)),
+      home: const ProgressIndicatorExample(),
+    );
+  }
+}
+
+class ProgressIndicatorExample extends StatefulWidget {
+  const ProgressIndicatorExample({super.key});
+
+  @override
+  State<ProgressIndicatorExample> createState() => _ProgressIndicatorExampleState();
+}
+
+class _ProgressIndicatorExampleState extends State<ProgressIndicatorExample>
+    with TickerProviderStateMixin {
+  late AnimationController controller;
+  bool determinate = false;
+
+  @override
+  void initState() {
+    controller = AnimationController(
+      /// [AnimationController]s can be created with `vsync: this` because of
+      /// [TickerProviderStateMixin].
+      vsync: this,
+      duration: const Duration(seconds: 2),
+    )..addListener(() {
+        setState(() {});
+      });
+    controller.repeat();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(20.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const Text(
+              'Linear progress indicator',
+              style: TextStyle(fontSize: 20),
+            ),
+            const SizedBox(height: 30),
+            LinearProgressIndicator(
+              value: controller.value,
+              semanticsLabel: 'Linear progress indicator',
+            ),
+            const SizedBox(height: 10),
+            Row(
+              children: <Widget>[
+                Expanded(
+                  child: Text(
+                    'determinate Mode',
+                    style: Theme.of(context).textTheme.titleSmall,
+                  ),
+                ),
+                Switch(
+                  value: determinate,
+                  onChanged: (bool value) {
+                    setState(() {
+                      determinate = value;
+                      if (determinate) {
+                        controller.stop();
+                      } else {
+                        controller..forward(from: controller.value)..repeat();
+                      }
+                    });
+                  },
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/api/test/material/progress_indicator/circular_progress_indicator.0_test.dart

@@ -9,11 +9,16 @@ import 'package:flutter_test/flutter_test.dart';
 void main() {
   testWidgets('Finds CircularProgressIndicator', (WidgetTester tester) async {
     await tester.pumpWidget(
-      const example.MyApp(),
+      const example.ProgressIndicatorApp(),
     );
+
     expect(
       find.bySemanticsLabel('Circular progress indicator'),
       findsOneWidget,
     );
+
+    // Test if CircularProgressIndicator is animating.
+    await tester.pump(const Duration(seconds: 2));
+    expect(tester.hasRunningAnimations, isTrue);
   });
 }

examples/api/test/material/progress_indicator/circular_progress_indicator.1_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/progress_indicator/circular_progress_indicator.1.dart'
+    as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Finds CircularProgressIndicator', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.ProgressIndicatorApp(),
+    );
+
+    expect(
+      find.bySemanticsLabel('Circular progress indicator').first,
+      findsOneWidget,
+    );
+
+    // Test if CircularProgressIndicator is animating.
+    expect(tester.hasRunningAnimations, isTrue);
+
+    await tester.pump(const Duration(seconds: 1));
+    expect(tester.hasRunningAnimations, isTrue);
+
+    // Test determinate mode button.
+    await tester.tap(find.byType(Switch));
+    await tester.pumpAndSettle();
+    expect(tester.hasRunningAnimations, isFalse);
+
+    await tester.tap(find.byType(Switch));
+    await tester.pump(const Duration(seconds: 1));
+    expect(tester.hasRunningAnimations, isTrue);
+  });
+}

examples/api/test/material/progress_indicator/linear_progress_indicator.0_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_api_samples/material/progress_indicator/linear_progress_indicator.0.dart'
+    as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Finds LinearProgressIndicator', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.ProgressIndicatorApp(),
+    );
+
+    expect(
+      find.bySemanticsLabel('Linear progress indicator'),
+      findsOneWidget,
+    );
+
+    // Test if LinearProgressIndicator is animating.
+    await tester.pump(const Duration(seconds: 2));
+    expect(tester.hasRunningAnimations, isTrue);
+  });
+}

examples/api/test/material/progress_indicator/linear_progress_indicator.1_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/progress_indicator/linear_progress_indicator.1.dart'
+    as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Finds LinearProgressIndicator', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.ProgressIndicatorApp(),
+    );
+
+    expect(
+      find.bySemanticsLabel('Linear progress indicator').first,
+      findsOneWidget,
+    );
+
+    // Test if LinearProgressIndicator is animating.
+    expect(tester.hasRunningAnimations, isTrue);
+
+    await tester.pump(const Duration(seconds: 1));
+    expect(tester.hasRunningAnimations, isTrue);
+
+    // Test determinate mode button.
+    await tester.tap(find.byType(Switch));
+    await tester.pumpAndSettle();
+    expect(tester.hasRunningAnimations, isFalse);
+
+    await tester.tap(find.byType(Switch));
+    await tester.pump(const Duration(seconds: 1));
+    expect(tester.hasRunningAnimations, isTrue);
+  });
+}

packages/flutter/lib/src/material/progress_indicator.dart

@@ -254,6 +254,14 @@ class _LinearProgressIndicatorPainter extends CustomPainter {
 /// ** See code in examples/api/lib/material/progress_indicator/linear_progress_indicator.0.dart **
 /// {@end-tool}
 ///
+/// {@tool dartpad}
+/// This sample shows the creation of a [LinearProgressIndicator] with a changing value.
+/// When toggling the switch, [LinearProgressIndicator] uses a determinate value.
+/// As described in: https://m3.material.io/components/progress-indicators/overview
+///
+/// ** See code in examples/api/lib/material/progress_indicator/linear_progress_indicator.1.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [CircularProgressIndicator], which shows progress along a circular arc.
@@ -474,6 +482,14 @@ class _CircularProgressIndicatorPainter extends CustomPainter {
 /// ** See code in examples/api/lib/material/progress_indicator/circular_progress_indicator.0.dart **
 /// {@end-tool}
 ///
+/// {@tool dartpad}
+/// This sample shows the creation of a [CircularProgressIndicator] with a changing value.
+/// When toggling the switch, [CircularProgressIndicator] uses a determinate value.
+/// As described in: https://m3.material.io/components/progress-indicators/overview
+///
+/// ** See code in examples/api/lib/material/progress_indicator/circular_progress_indicator.1.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [LinearProgressIndicator], which displays progress along a line.