bottom_app_bar_test.dart 14.9 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6 7 8
// This file is run as part of a reduced test set in CI on Mac and Windows
// machines.
@Tags(<String>['reduced-test-set'])

9 10
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
11
import 'package:flutter_test/flutter_test.dart';
12 13 14 15

void main() {
  testWidgets('no overlap with floating action button', (WidgetTester tester) async {
    await tester.pumpWidget(
16 17
      const MaterialApp(
        home: Scaffold(
18
          floatingActionButton: FloatingActionButton(
19 20
            onPressed: null,
          ),
21 22 23
          bottomNavigationBar: ShapeListener(
            BottomAppBar(
              child: SizedBox(height: 100.0),
24
            ),
25
          ),
26 27 28 29 30 31
        ),
      ),
    );

    final ShapeListenerState shapeListenerState = tester.state(find.byType(ShapeListener));
    final RenderBox renderBox = tester.renderObject(find.byType(BottomAppBar));
32
    final Path expectedPath = Path()
33 34 35 36 37 38 39 40
      ..addRect(Offset.zero & renderBox.size);

    final Path actualPath = shapeListenerState.cache.value;
    expect(
      actualPath,
      coversSameAreaAs(
        expectedPath,
        areaToCompare: (Offset.zero & renderBox.size).inflate(5.0),
41
      ),
42 43
    );
  });
44

45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
  testWidgets('custom shape', (WidgetTester tester) async {
    final Key key = UniqueKey();
    Future<void> pump(FloatingActionButtonLocation location) async {
      await tester.pumpWidget(
        SizedBox(
          width: 200,
          height: 200,
          child: RepaintBoundary(
            key: key,
            child: MaterialApp(
              home: Scaffold(
                floatingActionButton: FloatingActionButton(
                  onPressed: () { },
                ),
                floatingActionButtonLocation: location,
                bottomNavigationBar: BottomAppBar(
                  shape: AutomaticNotchedShape(
                    BeveledRectangleBorder(borderRadius: BorderRadius.circular(50.0)),
63
                    ContinuousRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
64 65 66 67 68 69 70 71 72 73 74 75 76 77
                  ),
                  notchMargin: 10.0,
                  color: Colors.green,
                  child: const SizedBox(height: 100.0),
                ),
              ),
            ),
          ),
        ),
      );
    }
    await pump(FloatingActionButtonLocation.endDocked);
    await expectLater(
      find.byKey(key),
78
      matchesGoldenFile('bottom_app_bar.custom_shape.1.png'),
79 80 81 82 83
    );
    await pump(FloatingActionButtonLocation.centerDocked);
    await tester.pumpAndSettle();
    await expectLater(
      find.byKey(key),
84
      matchesGoldenFile('bottom_app_bar.custom_shape.2.png'),
85
    );
86
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/44572
87

88 89
  testWidgets('color defaults to Theme.bottomAppBarColor', (WidgetTester tester) async {
    await tester.pumpWidget(
90 91
      MaterialApp(
        home: Builder(
92
          builder: (BuildContext context) {
93
            return Theme(
94
              data: Theme.of(context).copyWith(bottomAppBarColor: const Color(0xffffff00)),
95
              child: const Scaffold(
96
                floatingActionButton: FloatingActionButton(
97 98
                  onPressed: null,
                ),
99
                bottomNavigationBar: BottomAppBar(),
100 101
              ),
            );
102
          },
103 104 105 106 107 108 109 110 111 112 113 114
        ),
      ),
    );

    final PhysicalShape physicalShape =
      tester.widget(find.byType(PhysicalShape).at(0));

    expect(physicalShape.color, const Color(0xffffff00));
  });

  testWidgets('color overrides theme color', (WidgetTester tester) async {
    await tester.pumpWidget(
115 116
      MaterialApp(
        home: Builder(
117
          builder: (BuildContext context) {
118
            return Theme(
119
              data: Theme.of(context).copyWith(bottomAppBarColor: const Color(0xffffff00)),
120
              child: const Scaffold(
121
                floatingActionButton: FloatingActionButton(
122 123
                  onPressed: null,
                ),
124
                bottomNavigationBar: BottomAppBar(
125
                  color: Color(0xff0000ff),
126 127 128
                ),
              ),
            );
129
          },
130 131 132 133 134 135 136 137 138 139
        ),
      ),
    );

    final PhysicalShape physicalShape =
      tester.widget(find.byType(PhysicalShape).at(0));

    expect(physicalShape.color, const Color(0xff0000ff));
  });

140 141 142 143 144 145 146 147 148
  testWidgets('dark theme applies an elevation overlay color', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        theme: ThemeData.from(colorScheme: const ColorScheme.dark()),
        home: Scaffold(
          bottomNavigationBar: BottomAppBar(
            color: const ColorScheme.dark().surface,
          ),
        ),
149
      ),
150 151 152 153 154 155 156 157
    );

    final PhysicalShape physicalShape = tester.widget(find.byType(PhysicalShape).at(0));

    // For the default dark theme the overlay color for elevation 8 is 0xFF2D2D2D
    expect(physicalShape.color, const Color(0xFF2D2D2D));
  });

158 159
  // This is a regression test for a bug we had where toggling the notch on/off
  // would crash, as the shouldReclip method of ShapeBorderClipper or
160
  // _BottomAppBarClipper would try an illegal downcast.
161
  testWidgets('toggle shape to null', (WidgetTester tester) async {
162
    await tester.pumpWidget(
163 164
      const MaterialApp(
        home: Scaffold(
165 166
          bottomNavigationBar: BottomAppBar(
            shape: RectangularNotch(),
167 168 169 170 171 172
          ),
        ),
      ),
    );

    await tester.pumpWidget(
173 174
      const MaterialApp(
        home: Scaffold(
175
          bottomNavigationBar: BottomAppBar(
176
            shape: null,
177 178 179 180 181 182
          ),
        ),
      ),
    );

    await tester.pumpWidget(
183 184
      const MaterialApp(
        home: Scaffold(
185 186
          bottomNavigationBar: BottomAppBar(
            shape: RectangularNotch(),
187 188 189 190 191
          ),
        ),
      ),
    );
  });
192 193 194

  testWidgets('no notch when notch param is null', (WidgetTester tester) async {
    await tester.pumpWidget(
195 196
      const MaterialApp(
        home: Scaffold(
197
          bottomNavigationBar: ShapeListener(BottomAppBar(
198 199
            shape: null,
          )),
200
          floatingActionButton: FloatingActionButton(
201
            onPressed: null,
202
            child: Icon(Icons.add),
203 204 205 206 207 208 209 210
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        ),
      ),
    );

    final ShapeListenerState shapeListenerState = tester.state(find.byType(ShapeListener));
    final RenderBox renderBox = tester.renderObject(find.byType(BottomAppBar));
211
    final Path expectedPath = Path()
212 213 214 215 216 217 218 219 220
      ..addRect(Offset.zero & renderBox.size);

    final Path actualPath = shapeListenerState.cache.value;

    expect(
      actualPath,
      coversSameAreaAs(
        expectedPath,
        areaToCompare: (Offset.zero & renderBox.size).inflate(5.0),
221
      ),
222 223 224 225 226
    );
  });

  testWidgets('notch no margin', (WidgetTester tester) async {
    await tester.pumpWidget(
227 228
      const MaterialApp(
        home: Scaffold(
229 230 231
          bottomNavigationBar: ShapeListener(
            BottomAppBar(
              shape: RectangularNotch(),
232
              notchMargin: 0.0,
233
              child: SizedBox(height: 100.0),
234
            ),
235
          ),
236
          floatingActionButton: FloatingActionButton(
237
            onPressed: null,
238
            child: Icon(Icons.add),
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        ),
      ),
    );

    final ShapeListenerState shapeListenerState = tester.state(find.byType(ShapeListener));
    final RenderBox babBox = tester.renderObject(find.byType(BottomAppBar));
    final Size babSize = babBox.size;
    final RenderBox fabBox = tester.renderObject(find.byType(FloatingActionButton));
    final Size fabSize = fabBox.size;

    final double fabLeft = (babSize.width / 2.0) - (fabSize.width / 2.0);
    final double fabRight = fabLeft + fabSize.width;
    final double fabBottom = fabSize.height / 2.0;

255
    final Path expectedPath = Path()
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
      ..moveTo(0.0, 0.0)
      ..lineTo(fabLeft, 0.0)
      ..lineTo(fabLeft, fabBottom)
      ..lineTo(fabRight, fabBottom)
      ..lineTo(fabRight, 0.0)
      ..lineTo(babSize.width, 0.0)
      ..lineTo(babSize.width, babSize.height)
      ..lineTo(0.0, babSize.height)
      ..close();

    final Path actualPath = shapeListenerState.cache.value;

    expect(
      actualPath,
      coversSameAreaAs(
        expectedPath,
        areaToCompare: (Offset.zero & babSize).inflate(5.0),
273
      ),
274 275 276 277 278
    );
  });

  testWidgets('notch with margin', (WidgetTester tester) async {
    await tester.pumpWidget(
279 280
      const MaterialApp(
        home: Scaffold(
281 282 283
          bottomNavigationBar: ShapeListener(
            BottomAppBar(
              shape: RectangularNotch(),
284
              notchMargin: 6.0,
285
              child: SizedBox(height: 100.0),
286
            ),
287
          ),
288
          floatingActionButton: FloatingActionButton(
289
            onPressed: null,
290
            child: Icon(Icons.add),
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        ),
      ),
    );

    final ShapeListenerState shapeListenerState = tester.state(find.byType(ShapeListener));
    final RenderBox babBox = tester.renderObject(find.byType(BottomAppBar));
    final Size babSize = babBox.size;
    final RenderBox fabBox = tester.renderObject(find.byType(FloatingActionButton));
    final Size fabSize = fabBox.size;

    final double fabLeft = (babSize.width / 2.0) - (fabSize.width / 2.0) - 6.0;
    final double fabRight = fabLeft + fabSize.width + 6.0;
    final double fabBottom = 6.0 + fabSize.height / 2.0;

307
    final Path expectedPath = Path()
308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
      ..moveTo(0.0, 0.0)
      ..lineTo(fabLeft, 0.0)
      ..lineTo(fabLeft, fabBottom)
      ..lineTo(fabRight, fabBottom)
      ..lineTo(fabRight, 0.0)
      ..lineTo(babSize.width, 0.0)
      ..lineTo(babSize.width, babSize.height)
      ..lineTo(0.0, babSize.height)
      ..close();

    final Path actualPath = shapeListenerState.cache.value;

    expect(
      actualPath,
      coversSameAreaAs(
        expectedPath,
        areaToCompare: (Offset.zero & babSize).inflate(5.0),
325
      ),
326 327
    );
  });
328 329 330

  testWidgets('observes safe area', (WidgetTester tester) async {
    await tester.pumpWidget(
331 332
      const MaterialApp(
        home: MediaQuery(
333 334
          data: MediaQueryData(
            padding: EdgeInsets.all(50.0),
335
          ),
336 337 338 339
          child: Scaffold(
            bottomNavigationBar: BottomAppBar(
              child: Center(
                child: Text('safe'),
340 341 342 343 344 345 346 347 348 349 350 351
              ),
            ),
          ),
        ),
      ),
    );

    expect(
      tester.getBottomLeft(find.widgetWithText(Center, 'safe')),
      const Offset(50.0, 550.0),
    );
  });
352 353 354

  testWidgets('clipBehavior is propagated', (WidgetTester tester) async {
    await tester.pumpWidget(
355 356
      const MaterialApp(
        home: Scaffold(
357 358 359 360
          bottomNavigationBar:
              BottomAppBar(
                shape: RectangularNotch(),
                notchMargin: 0.0,
361
                child: SizedBox(height: 100.0),
362 363 364 365 366 367 368 369 370
              ),
        ),
      ),
    );

    PhysicalShape physicalShape = tester.widget(find.byType(PhysicalShape));
    expect(physicalShape.clipBehavior, Clip.none);

    await tester.pumpWidget(
371 372
      const MaterialApp(
        home: Scaffold(
373 374 375 376 377
          bottomNavigationBar:
          BottomAppBar(
            shape: RectangularNotch(),
            notchMargin: 0.0,
            clipBehavior: Clip.antiAliasWithSaveLayer,
378
            child: SizedBox(height: 100.0),
379 380 381 382 383 384 385 386
          ),
        ),
      ),
    );

    physicalShape = tester.widget(find.byType(PhysicalShape));
    expect(physicalShape.clipBehavior, Clip.antiAliasWithSaveLayer);
  });
387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420

  testWidgets('BottomAppBar with shape when Scaffold.bottomNavigationBar == null', (WidgetTester tester) async {
    // Regression test for https://github.com/flutter/flutter/issues/80878
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.green,
            child: const Icon(Icons.home),
            onPressed: () {},
          ),
          body: Stack(
            children: <Widget>[
              Container(
                color: Colors.amber,
              ),
              Container(
                alignment: Alignment.bottomCenter,
                child: BottomAppBar(
                  color: Colors.green,
                  shape: const CircularNotchedRectangle(),
                  child: Container(height: 50),
                ),
              ),
            ],
          ),
        ),
      ),
    );

    expect(tester.getRect(find.byType(FloatingActionButton)), const Rect.fromLTRB(372, 528, 428, 584));
    expect(tester.getSize(find.byType(BottomAppBar)), const Size(800, 50));
  });
421 422 423 424
}

// The bottom app bar clip path computation is only available at paint time.
// In order to examine the notch path we implement this caching painter which
425
// at paint time looks for a descendant PhysicalShape and caches the
426 427 428 429
// clip path it is using.
class ClipCachePainter extends CustomPainter {
  ClipCachePainter(this.context);

430
  late Path value;
431 432 433 434
  BuildContext context;

  @override
  void paint(Canvas canvas, Size size) {
435 436
    final RenderPhysicalShape physicalShape = findPhysicalShapeChild(context)!;
    value = physicalShape.clipper!.getClip(size);
437 438
  }

439 440
  RenderPhysicalShape? findPhysicalShapeChild(BuildContext context) {
    RenderPhysicalShape? result;
441
    context.visitChildElements((Element e) {
442
      final RenderObject renderObject = e.findRenderObject()!;
443 444
      if (renderObject.runtimeType == RenderPhysicalShape) {
        assert(result == null);
445
        result = renderObject as RenderPhysicalShape;
446 447 448 449 450 451 452 453 454 455 456 457 458 459
      } else {
        result = findPhysicalShapeChild(e);
      }
    });
    return result;
  }

  @override
  bool shouldRepaint(ClipCachePainter oldDelegate) {
    return true;
  }
}

class ShapeListener extends StatefulWidget {
460
  const ShapeListener(this.child, { Key? key }) : super(key: key);
461 462 463 464

  final Widget child;

  @override
465
  State createState() => ShapeListenerState();
466 467 468 469 470 471

}

class ShapeListenerState extends State<ShapeListener> {
  @override
  Widget build(BuildContext context) {
472
    return CustomPaint(
473
      painter: cache,
474
      child: widget.child,
475 476 477
    );
  }

478
  late ClipCachePainter cache;
479 480 481 482

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
483
    cache = ClipCachePainter(context);
484 485 486
  }

}
487

488
class RectangularNotch extends NotchedShape {
489 490 491
  const RectangularNotch();

  @override
492
  Path getOuterPath(Rect host, Rect? guest) {
493 494
    if (guest == null)
      return Path()..addRect(host);
495
    return Path()
496 497 498 499 500 501 502 503 504 505 506
      ..moveTo(host.left, host.top)
      ..lineTo(guest.left, host.top)
      ..lineTo(guest.left, guest.bottom)
      ..lineTo(guest.right, guest.bottom)
      ..lineTo(guest.right, host.top)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close();
  }
}