Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample code for meant to demonstrating writing simple widget test for your applications. Code used as part of an upcoming Flutter testing talk by @mkiisoft and myself.
import 'package:flutter/material.dart';
const kBreakpoint = 860.0;
extension Width on BuildContext {
double get width => MediaQuery.of(this).size.width;
}
void main() {
runApp(
MaterialApp(
home: ExamplePage(),
),
);
}
class ExamplePage extends StatelessWidget {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
final List<String> _items = [
"Item One",
"Item Two",
];
Widget _buildNavItem(String item) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
color: Colors.redAccent,
onPressed: () {},
child: Text(
item,
style: TextStyle(color: Colors.white),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: ExampleAppBar(
scaffoldKey: scaffoldKey,
menuItems: _items.map((item) => _buildNavItem(item)).toList(),
),
body: Container(
child: Center(
child: Text("Hello"),
),
),
drawer: context.width <= kBreakpoint
? Drawer(
child: Column(
children: _items
.map(
(item) => ListTile(
title: Text(item),
),
)
.toList(),
),
)
: null,
);
}
}
class ExampleAppBar extends StatefulWidget implements PreferredSizeWidget {
const ExampleAppBar({
Key key,
@required this.menuItems,
@required this.scaffoldKey,
}) : assert(menuItems != null),
assert(menuItems.length > 1),
super(key: key);
final List<Widget> menuItems;
final GlobalKey<ScaffoldState> scaffoldKey;
@override
ExampleAppBarState createState() => ExampleAppBarState();
@override
Size get preferredSize => Size.fromHeight(80.0);
}
class ExampleAppBarState extends State<ExampleAppBar> {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, dimens) {
return Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(12),
child: Row(
children: [
if (context.width > kBreakpoint) ...widget.menuItems,
if (context.width <= kBreakpoint)
IconButton(
icon: Icon(Icons.subject),
color: Colors.white,
onPressed: () => widget.scaffoldKey.currentState.openDrawer(),
),
Spacer(),
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: InkWell(
onTap: () {},
child: Icon(
Icons.account_circle,
color: Colors.white,
size: 36.0,
),
),
)
],
),
);
},
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_sandbox/responsive_appbar/appbar_example.dart';
import 'package:flutter_test/flutter_test.dart';
Widget materialWidget(Widget child) {
return MaterialApp(
home: child,
);
}
void main() {
group(
"AppBar",
() {
testWidgets(
"AppBar item shows on large devices",
(WidgetTester tester) async {
final widget = MediaQuery(
data: MediaQueryData(size: Size(900.0, 1200.0)),
child: ExamplePage(),
);
// First build
await tester.pumpWidget(materialWidget(widget));
// Create finders
final Finder firstItemFinder = find.text("Item One");
final Finder secondItemFinder = find.text("Item Two");
// Expectations
expect(firstItemFinder, findsOneWidget);
expect(secondItemFinder, findsOneWidget);
},
);
testWidgets(
"AppBar item does not show on small devices",
(WidgetTester tester) async {
final widget = MediaQuery(
data: MediaQueryData(size: Size(600.0, 600.0)),
child: ExamplePage(),
);
await tester.pumpWidget(materialWidget(widget));
final Finder firstItemFinder = find.text("Item One");
final Finder secondItemFinder = find.text("Item Two");
expect(firstItemFinder, findsNothing);
expect(secondItemFinder, findsNothing);
},
);
},
);
group(
"Page drawer",
() {
testWidgets(
"Drawer icon is not visible on large screens",
(WidgetTester tester) async {
final widget = MediaQuery(
data: MediaQueryData(size: Size(900.0, 1200.0)),
child: ExamplePage(),
);
await tester.pumpWidget(materialWidget(widget));
final Finder iconFinder = find.byIcon(Icons.subject);
expect(iconFinder, findsNothing);
},
);
testWidgets(
"Drawer icon is visible on large screens",
(WidgetTester tester) async {
final widget = MediaQuery(
data: MediaQueryData(size: Size(600.0, 600.0)),
child: ExamplePage(),
);
await tester.pumpWidget(materialWidget(widget));
final Finder iconFinder = find.byIcon(Icons.subject);
expect(iconFinder, findsOneWidget);
},
);
testWidgets(
"Drawer items is visible on large screens",
(WidgetTester tester) async {
final widget = MediaQuery(
data: MediaQueryData(size: Size(600.0, 600.0)),
child: ExamplePage(),
);
await tester.pumpWidget(materialWidget(widget));
final Finder iconFinder = find.byIcon(Icons.subject);
await tester.tap(iconFinder);
await tester.pumpAndSettle();
final Finder firstItemFinder = find.text("Item One");
final Finder secondItemFinder = find.text("Item Two");
expect(firstItemFinder, findsOneWidget);
expect(secondItemFinder, findsOneWidget);
},
);
},
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment