firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CupertinoFormRow: Add an interactive example (#103041)

Browse Source 
* `CupertinoFormRow`: Add an interactive example

* fix typo

* Update docs
This commit is contained in:
Taha Tesser 2022-05-05 08:58:53 +03:00 committed by GitHub
parent 81fd748ac2
commit 86e55df7f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 166 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
examples/api/lib/cupertino/form_row/cupertino_form_row.0.dart Normal file
View File

@ -0,0 +1,138 @@
// 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 CupertinoFormRow
import 'package:flutter/cupertino.dart';
void main() => runApp(const CupertinoFormRowApp());
class CupertinoFormRowApp extends StatelessWidget {
const CupertinoFormRowApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: CupertinoFormRowExample(),
);
}
}
class CupertinoFormRowExample extends StatefulWidget {
const CupertinoFormRowExample({Key? key}) : super(key: key);
@override
State<CupertinoFormRowExample> createState() => _CupertinoFormRowExampleState();
}
class _CupertinoFormRowExampleState extends State<CupertinoFormRowExample> {
bool airplaneMode = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CupertinoFormSection(
header: const Text('Connectivity'),
children: <Widget>[
CupertinoFormRow(
prefix: const PrefixWidget(
icon: CupertinoIcons.airplane,
title: 'Airplane Mode',
color: CupertinoColors.systemOrange,
),
child: CupertinoSwitch(
value: airplaneMode,
onChanged: (bool value) {
setState(() {
airplaneMode = value;
});
},
),
),
CupertinoFormRow(
prefix: const PrefixWidget(
icon: CupertinoIcons.wifi,
title: 'Wi-Fi',
color: CupertinoColors.systemBlue,
),
error: const Text('Home network unavailable'),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const <Widget>[
Text('Not connected'),
SizedBox(width: 5),
Icon(CupertinoIcons.forward)
],
),
),
CupertinoFormRow(
prefix: const PrefixWidget(
icon: CupertinoIcons.bluetooth,
title: 'Bluetooth',
color: CupertinoColors.activeBlue,
),
helper: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const <Widget>[
Text('Headphone'),
Text('Connected'),
],
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const <Widget>[
Text('On'),
SizedBox(width: 5),
Icon(CupertinoIcons.forward)
],
),
),
const CupertinoFormRow(
prefix: PrefixWidget(
icon: CupertinoIcons.bluetooth,
title: 'Mobile Data',
color: CupertinoColors.systemGreen,
),
child: Icon(CupertinoIcons.forward),
),
],
),
);
}
}
class PrefixWidget extends StatelessWidget {
const PrefixWidget({
Key? key,
required this.icon,
required this.title,
required this.color,
}) : super(key: key);
final IconData icon;
final String title;
final Color color;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(4.0),
),
child: Icon(icon, color: CupertinoColors.white),
),
const SizedBox(width: 15),
Text(title)
],
);
}
}

23
examples/api/test/cupertino/form_row/cupertino_form_row.0_test.dart Normal file
View File

@ -0,0 +1,23 @@
// 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/cupertino.dart';
import 'package:flutter_api_samples/cupertino/form_row/cupertino_form_row.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Cupertino form section displays cupertino form rows', (WidgetTester tester) async {
await tester.pumpWidget(
const example.CupertinoFormRowApp(),
);
expect(find.byType(CupertinoFormSection), findsOneWidget);
expect(find.byType(CupertinoFormRow), findsNWidgets(4));
expect(find.widgetWithText(CupertinoFormSection, 'Connectivity'), findsOneWidget);
expect(find.widgetWithText(CupertinoFormRow, 'Airplane Mode'), findsOneWidget);
expect(find.widgetWithText(CupertinoFormRow, 'Wi-Fi'), findsOneWidget);
expect(find.widgetWithText(CupertinoFormRow, 'Bluetooth'), findsOneWidget);
expect(find.widgetWithText(CupertinoFormRow, 'Mobile Data'), findsOneWidget);
});
}

47
packages/flutter/lib/src/cupertino/form_row.dart
View File

@ -34,50 +34,13 @@ const EdgeInsetsGeometry _kDefaultPadding =
/// be shown in [CupertinoColors.destructiveRed] coloring and
/// medium-weighted font.
///
/// {@tool snippet}
/// {@tool dartpad}
/// Creates a [CupertinoFormSection] containing a [CupertinoFormRow] with [prefix],
/// [child], [helper] and [error] specified.
///
/// Creates a [CupertinoFormSection] containing a [CupertinoFormRow] with the
/// [prefix], [child], [helper] and [error] widgets.
///
/// ```dart
/// class FlutterDemo extends StatefulWidget {
/// const FlutterDemo({Key? key}) : super(key: key);
///
/// @override
/// State<FlutterDemo> createState() => _FlutterDemoState();
/// }
///
/// class _FlutterDemoState extends State<FlutterDemo> {
/// bool toggleValue = false;
///
/// @override
/// Widget build(BuildContext context) {
/// return CupertinoPageScaffold(
/// child: Center(
/// child: CupertinoFormSection(
/// header: const Text('SECTION 1'),
/// children: <Widget>[
/// CupertinoFormRow(
/// prefix: const Text('Toggle'),
/// helper: const Text('Use your instincts'),
/// error: toggleValue ? const Text('Cannot be true') : null,
/// child: CupertinoSwitch(
/// value: toggleValue,
/// onChanged: (bool value) {
/// setState(() {
/// toggleValue = value;
/// });
/// },
/// ),
/// ),
/// ],
/// ),
/// ),
/// );
/// }
/// }
/// ```
/// ** See code in examples/api/lib/cupertino/form_row/cupertino_form_row.0.dart **
/// {@end-tool}
///
class CupertinoFormRow extends StatelessWidget {
/// Creates an iOS-style split form row with a standard prefix and child widget.
/// Also provides a space for error and helper widgets that appear underneath.