development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-09-21 01:01:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Material 3 ProgressIndicator examples (#113950)

Browse source
This commit is contained in:
Taha Tesser 2022-10-25 10:27:08 +03:00 committed by GitHub
parent b0e7c9c4f0
commit 7f75d24164
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 340 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/api/lib/material/progress_indicator/circular_progress_indicator.0.dart
View file

@ -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(() {

101
examples/api/lib/material/progress_indicator/circular_progress_indicator.1.dart Normal file
View file

@ -0,0 +1,101 @@
// 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();
}
});
},
),
],
),
],
),
),
);
}
}

23
examples/api/lib/material/progress_indicator/linear_progress_indicator.0.dart
View file

@ -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(() {

101
examples/api/lib/material/progress_indicator/linear_progress_indicator.1.dart Normal file
View file

@ -0,0 +1,101 @@
// 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();
}
});
},
),
],
),
],
),
),
);
}
}

7
examples/api/test/material/progress_indicator/circular_progress_indicator.0_test.dart
View file

@ -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);
});
}

36
examples/api/test/material/progress_indicator/circular_progress_indicator.1_test.dart Normal file
View file

@ -0,0 +1,36 @@
// 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);
});
}

24
examples/api/test/material/progress_indicator/linear_progress_indicator.0_test.dart Normal file
View file

@ -0,0 +1,24 @@
// 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);
});
}

36
examples/api/test/material/progress_indicator/linear_progress_indicator.1_test.dart Normal file
View file

@ -0,0 +1,36 @@
// 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);
});
}

16
packages/flutter/lib/src/material/progress_indicator.dart
View file

@ -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.