development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-12 11:12:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update example code and docs for InteractiveViewer.builder (#98623)

Browse source
This commit is contained in:
Michael Goderbauer 2022-02-16 17:25:17 -08:00 committed by GitHub
parent eb83181041
commit ac1fc234ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
examples/api/lib/widgets/interactive_viewer/interactive_viewer.builder.0.dart
View file

@ -5,7 +5,6 @@
// Flutter code sample for InteractiveViewer.builder
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vector_math/vector_math_64.dart' show Quad, Vector3;
void main() => runApp(const IVBuilderExampleApp());
@ -32,77 +31,34 @@ class _IVBuilderExample extends StatefulWidget {
}
class _IVBuilderExampleState extends State<_IVBuilderExample> {
final TransformationController _transformationController =
TransformationController();
static const double _cellWidth = 160.0;
static const double _cellHeight = 80.0;
static const double _cellWidth = 200.0;
static const double _cellHeight = 26.0;
// Returns true iff the given cell is currently visible. Caches viewport
// calculations.
Quad? _cachedViewport;
late int _firstVisibleRow;
late int _firstVisibleColumn;
late int _lastVisibleRow;
late int _lastVisibleColumn;
bool _isCellVisible(int row, int column, Quad viewport) {
if (viewport != _cachedViewport) {
final Rect aabb = _axisAlignedBoundingBox(viewport);
_cachedViewport = viewport;
_firstVisibleRow = (aabb.top / _cellHeight).floor();
_firstVisibleColumn = (aabb.left / _cellWidth).floor();
_lastVisibleRow = (aabb.bottom / _cellHeight).floor();
_lastVisibleColumn = (aabb.right / _cellWidth).floor();
}
return row >= _firstVisibleRow &&
row <= _lastVisibleRow &&
column >= _firstVisibleColumn &&
column <= _lastVisibleColumn;
}
// Returns the axis aligned bounding box for the given Quad, which might not
// be axis aligned.
Rect _axisAlignedBoundingBox(Quad quad) {
double? xMin;
double? xMax;
double? yMin;
double? yMax;
// Returns the axis aligned bounding box for the given Quad, which might not be axis aligned.
Rect axisAlignedBoundingBox(Quad quad) {
double xMin = quad.point0.x;
double xMax = quad.point0.x;
double yMin = quad.point0.y;
double yMax = quad.point0.y;
for (final Vector3 point in <Vector3>[
quad.point0,
quad.point1,
quad.point2,
quad.point3
]) {
if (xMin == null || point.x < xMin) {
if (point.x < xMin) {
xMin = point.x;
}
if (xMax == null || point.x > xMax) {
} else if (point.x > xMax) {
xMax = point.x;
}
if (yMin == null || point.y < yMin) {
if (point.y < yMin) {
yMin = point.y;
}
if (yMax == null || point.y > yMax) {
} else if (point.y > yMax) {
yMax = point.y;
}
}
return Rect.fromLTRB(xMin!, yMin!, xMax!, yMax!);
}
void _onChangeTransformation() {
setState(() {});
}
@override
void initState() {
super.initState();
_transformationController.addListener(_onChangeTransformation);
}
@override
void dispose() {
_transformationController.removeListener(_onChangeTransformation);
super.dispose();
return Rect.fromLTRB(xMin, yMin, xMax, yMax);
}
@override
@ -111,32 +67,25 @@ class _IVBuilderExampleState extends State<_IVBuilderExample> {
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return InteractiveViewer.builder(
alignPanAxis: true,
scaleEnabled: false,
transformationController: _transformationController,
boundaryMargin: const EdgeInsets.all(double.infinity),
builder: (BuildContext context, Quad viewport) {
// A simple extension of Table that builds cells.
return _TableBuilder(
rowCount: 60,
columnCount: 6,
cellWidth: _cellWidth,
builder: (BuildContext context, int row, int column) {
if (!_isCellVisible(row, column, viewport)) {
debugPrint('removing cell ($row, $column)');
return Container(height: _cellHeight);
}
debugPrint('building cell ($row, $column)');
return Container(
height: _cellHeight,
color: row % 2 + column % 2 == 1
? Colors.white
: Colors.grey.withOpacity(0.1),
child: Align(
alignment: Alignment.centerLeft,
child: Text('$row x $column'),
),
);
});
cellWidth: _cellWidth,
cellHeight: _cellHeight,
viewport: axisAlignedBoundingBox(viewport),
builder: (BuildContext context, int row, int column) {
return Container(
height: _cellHeight,
width: _cellWidth,
color: row % 2 + column % 2 == 1
? Colors.white
: Colors.grey.withOpacity(0.1),
child: Align(
child: Text('$row x $column'),
),
);
},
);
},
);
},
@ -150,38 +99,44 @@ typedef _CellBuilder = Widget Function(
class _TableBuilder extends StatelessWidget {
const _TableBuilder({
required this.rowCount,
required this.columnCount,
required this.cellWidth,
required this.cellHeight,
required this.viewport,
required this.builder,
}) : assert(rowCount > 0),
assert(columnCount > 0);
});
final int rowCount;
final int columnCount;
final double cellWidth;
final double cellHeight;
final Rect viewport;
final _CellBuilder builder;
@override
Widget build(BuildContext context) {
return Table(
// ignore: prefer_const_literals_to_create_immutables
columnWidths: <int, TableColumnWidth>{
for (int column = 0; column < columnCount; column++)
column: FixedColumnWidth(cellWidth),
},
// ignore: prefer_const_literals_to_create_immutables
children: <TableRow>[
for (int row = 0; row < rowCount; row++)
// ignore: prefer_const_constructors
TableRow(
// ignore: prefer_const_literals_to_create_immutables
children: <Widget>[
for (int column = 0; column < columnCount; column++)
builder(context, row, column),
],
),
],
final int firstRow = (viewport.top / cellHeight).floor();
final int lastRow = (viewport.bottom / cellHeight).ceil();
final int firstCol = (viewport.left / cellWidth).floor();
final int lastCol = (viewport.right / cellWidth).ceil();
// This will create and render exactly (lastRow - firstRow) * (lastCol - firstCol) cells
return SizedBox(
// Stack needs constraints, even though we then Clip.none outside of them.
// InteractiveViewer.builder always sets constrained to false, giving infinite constraints to the child.
// See: https://master-api.flutter.dev/flutter/widgets/InteractiveViewer/constrained.html
width: 1,
height: 1,
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
for (int row = firstRow; row < lastRow; row++)
for (int col = firstCol; col < lastCol; col++)
Positioned(
left: col * cellWidth,
top: row * cellHeight,
child: builder(context, row, col),
),
],
),
);
}
}

35
examples/api/test/widgets/interactive_viewer/interactive_viewer.builder.0_test.dart Normal file
View file

@ -0,0 +1,35 @@
// 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/widgets.dart';
import 'package:flutter_api_samples/widgets/interactive_viewer/interactive_viewer.builder.0.dart'
as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('has correct items on screen', (WidgetTester tester) async {
await tester.pumpWidget(
const example.IVBuilderExampleApp(),
);
final Finder positionedFinder = find.byType(Positioned);
final Finder zeroFinder = find.text('0 x 0');
final Finder nineFinder = find.text('0 x 9');
expect(positionedFinder, findsNWidgets(35));
expect(zeroFinder, findsOneWidget);
expect(nineFinder, findsNothing);
const Offset firstLocation = Offset(750.0, 100.0);
final TestGesture gesture = await tester.startGesture(firstLocation);
const Offset secondLocation = Offset(50.0, 100.0);
await gesture.moveTo(secondLocation);
await tester.pump();
expect(positionedFinder, findsNWidgets(42));
expect(nineFinder, findsOneWidget);
expect(zeroFinder, findsNothing);
});
}

8
packages/flutter/lib/src/widgets/interactive_viewer.dart
View file

@ -37,15 +37,15 @@ typedef InteractiveViewerWidgetBuilder = Widget Function(BuildContext context, Q
/// don't set [clipBehavior] or be sure that the InteractiveViewer widget is the
/// size of the area that should be interactive.
///
/// See [flutter-go](https://github.com/justinmc/flutter-go) for an example of
/// robust positioning of an InteractiveViewer child that works for all screen
/// sizes and child sizes.
///
/// The [child] must not be null.
///
/// See also:
/// * The [Flutter Gallery's transformations demo](https://github.com/flutter/gallery/blob/master/lib/demos/reference/transformations_demo.dart),
/// which includes the use of InteractiveViewer.
/// * The [flutter-go demo](https://github.com/justinmc/flutter-go), which includes robust positioning of an InteractiveViewer child
/// that works for all screen sizes and child sizes.
/// * The [Lazy Flutter Performance Session](https://www.youtube.com/watch?v=qax_nOpgz7E), which includes the use of an InteractiveViewer to
/// performantly view subsets of a large set of widgets using the builder constructor.
///
/// {@tool dartpad}
/// This example shows a simple Container that can be panned and zoomed.