a tiny tale about an assert which broke my widget in Flutter 3.16

life is like a hairline, delicate yet defining 🥸

Photo by Imre Tömösvári on Unsplash

after upgrading to Flutter Stable 3.16, if your codebase has a widget where BorderSide’s width is 0 & BorderRadius is non-zero then the widget will glitch out of nowhere 😩

let’s check this code:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: double.maxFinite,
        child: DecoratedBox(
          decoration: const BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
            border: Border(
              left: BorderSide(
                width: 0.0,
                color: Colors.black,
              ),
              top: BorderSide(
                width: 0.0,
                color: Colors.black,
              ),
              right: BorderSide(
                width: 0.0,
                color: Colors.black,
              ),
              bottom: BorderSide(
                width: 1,
                color: Colors.black,
              ),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                const Spacer(),
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.black,
                    border: Border.all(
                      color: Colors.black,
                      width: 1.0,
                    ),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(20.0),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: InkWell(
                      onTap: () {},
                      child: const Text("FAQs"),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

output with Flutter 3.13 💙

😄

output with Flutter 3.16 💀

😢

-_- :/

it is happening because of following change in the framework: (it is not mentioned in the breaking changes, not sure if it belongs there or not)

https://github.com/flutter/flutter/pull/124417

in run console, error like this would popup: 💇

======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
A hairline border like `BorderSide(width: 0.0, style: BorderStyle.solid)` can only be drawn when BorderRadius is zero or null.
'package:flutter/src/painting/box_border.dart':
Failed assertion: line 661 pos 16: 'borderRadius == null || borderRadius == BorderRadius.zero'

assertion / error

discussion thread in the PR

hope this helps you to solve the sudden glitch you’ll face after Flutter 3.16 upgrade if you’re using hairline borders! 💇‍♂

That’s it for this one. Thank you for reading this 💙

If you find this byte-sized post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.

For any other issues feel free to reach out to me via Twitter:

https://twitter.com/piedcipher

Photo by Jack Barton on Unsplash

i am batman 🦇