fluttersliverappbar

How to avoid SliverAppBar's elements to go above the BackButton?


I have a SliverAppBar with some elements inside, check the 3 images where I resize the app window smaller and smaller.

1

2

3

I would like to avoid the texts and icons from going above the BackButton, is there a way to do that?

Here there is a piece of my simple code:

CustomScrollView(
        primary: true,
        slivers: <Widget>[
          const SliverAppBar(
            backgroundColor: Colors.black,
            pinned: true,
            title: Text(
              'Home',
              style: TextStyle(color: Colors.white),
            ),
            leading: BackButton(
              color: Colors.white,
            ),
            actions: <Widget>[
              Icon(
                Icons.person,
                color: Colors.white,
              ),
              Flexible(
                child: Text(
                  'text1',
                  maxLines: 1,
                  style: TextStyle(color: Colors.white),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Icon(
                Icons.tsunami,
                color: Colors.white,
              ),
              Flexible(
                child: Text(
                  'text2',
                  maxLines: 1,
                  style: TextStyle(color: Colors.white),
                ),
              ),
              SizedBox(
                width: 10,
              ),
            ],
          ),
),

Thanks in advance!

*Note: my code doesn't produce errors and I understand that probably it will never happen in a device where the text and icons are above the BackButton but still I would like to know if there is a way to avoid it.


Solution

  • You can restrict the window size of your app specially if it runs on windows or macOS: You can use packages like window_manager and set the minimum with of the screen

    dependencies:
      window_manager: ^0.3.8
    
     void main() {
      WidgetsFlutterBinding.ensureInitialized();
      if (Platform.isWindows) {
        setWindowMinSize(const Size(512, 384));
        Future<Null>.delayed(Duration(seconds: 1), () {
            setWindowFrame(Rect.fromCenter(center: Offset(1000, 500), width: 600, height: 1000));
        });
      }
      runApp(MyApp());
    }
    

    That will never let the user minimize the app screen less than 512px, and your app bar never get shrinked.