user54517
user54517

Reputation: 2420

Bottom sheet overflow

I have a problem with a bottom sheet.

enter image description here

I have this overflow error Which is weird. I mean, it is normal that it overflows, that's the purpose of the widget :O

https://pub.dev/packages/expandable_bottom_bar

Obviously, no overflow when the bottom sheet is opened :

enter image description here

Should I ignore it as long as I am not in release mode ? I tried to fix it but didn't find any way :/

EDIT : The bottom sheet is placed inside of a stack, within a Positioned Widget :

Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: BottomExpandableAppBar(
                // Provide the bar controller in build method or default controller as ancestor in a tree 
                controller: controller,
                appBarHeight: 00.0,
                expandedHeight: controller.dragLength,
                horizontalMargin: 0.0,
                bottomOffset: 50.0,
                //expandedBackColor: Colors.white,
                expandedDecoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black12,
                        offset: Offset(5.0, 5.0),
                        blurRadius: 15.0,
                        spreadRadius: 15.0,
                      ),
                  ]
                ),
                // Your bottom sheet code here
                expandedBody: new Bookings(controller: controller),
                shape: AutomaticNotchedShape(
                         RoundedRectangleBorder(),
                         StadiumBorder(
                             side: BorderSide()
                             )
                          ),
                // Your bottom app bar code here
              ),
            )

The booking widget is a column composed of a title (text widget), a list and a button.

EDIT 2 : the code for the whole screen :

import 'package:expandable_bottom_bar/expandable_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/feather.dart';
//import 'package:travel_agent_app/models/tripList.dart';
import 'package:travel_agent_app/models/Trip.dart';
import 'package:travel_agent_app/screens/appBackground.dart';
import 'package:travel_agent_app/screens/trips/bookings.dart';
import 'package:travel_agent_app/screens/trips/tripContent.dart';


class TripDetails extends StatefulWidget {
  final Trip i; 
  const TripDetails(this.i, {Key key}) : super(key: key);

  @override
  _TripDetailsState createState() => _TripDetailsState();

}

class _TripDetailsState extends State<TripDetails> with SingleTickerProviderStateMixin {
  BottomBarController controller;

  @override
  void initState() {
    super.initState();
    controller = BottomBarController(vsync: this, dragLength: 450, snap: true);
  }

  @override
  Widget build(BuildContext context) {

    var cardDecoration = BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.0),
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              offset: Offset(0.0, 15.0),
              blurRadius: 15.0
          ),
        ]
      );


      var scrollController = ScrollController();

    return Scaffold(
      extendBody: true,
      body: Builder(
        builder: (context) =>
         Stack(
          children: <Widget>[
            AppBackground(),

            Container(
              width: double.infinity,
              height: double.infinity,
              child: Image.network(
                this.widget.i.imageUrl,
                fit: BoxFit.fitHeight,
              ),
            ),
            RotatedBox(
              quarterTurns: 3,
              child: Container(
                height: MediaQuery.of(context).size.height,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)],
                    stops: [0.8, 1]
                  )
                ),
              ),
            ),

            Hero(
              tag: this.widget.i.origin,
              flightShuttleBuilder: (BuildContext flightContext,
                Animation<double> animation,
                HeroFlightDirection flightDirection,
                BuildContext fromHeroContext,
                BuildContext toHeroContext,){
                  return SingleChildScrollView(
                    child: Container(
                      child: toHeroContext.widget
                    ),
                  );
                },
              child: Material(
                type: MaterialType.transparency,
                child: Center(
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Container(
                      margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.15),
                      height: MediaQuery.of(context).size.height * 0.87,
                      width: MediaQuery.of(context).size.width * 0.95,
                      decoration: cardDecoration,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: new TripContent(this.widget.i, false),
                      ),
                    ),
                  ),
                ),
              ),
            ),

            Positioned(
              top: 0.0,
              left: 0.0,
              right: 0.0,
              child: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                leading: IconButton(
                  icon: Icon(Feather.getIconData("arrow-left")),
                  onPressed: (){
                    Navigator.pop(context);
                    },
                  color: Colors.white,
                  iconSize: 30.0,
                ),
              ),
            ),

            Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: BottomExpandableAppBar(
                // Provide the bar controller in build method or default controller as ancestor in a tree 
                controller: controller,
                appBarHeight: 00.0,
                expandedHeight: controller.dragLength,
                horizontalMargin: 0.0,
                bottomOffset: 50.0,
                //expandedBackColor: Colors.white,
                expandedDecoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black12,
                        offset: Offset(5.0, 5.0),
                        blurRadius: 15.0,
                        spreadRadius: 15.0,
                      ),
                  ]
                ),
                // Your bottom sheet code here
                expandedBody: new Bookings(controller: controller),
                shape: AutomaticNotchedShape(
                         RoundedRectangleBorder(),
                         StadiumBorder(
                             side: BorderSide()
                             )
                          ),
                // Your bottom app bar code here
              ),
            )
        ],
    ),
      ),

    );
  }
}

Upvotes: 1

Views: 10490

Answers (2)

user54517
user54517

Reputation: 2420

I finally fixed that problem : I realized that the overflow was coming from the a widget inside the BottomSheet : the Column widget. In order to get ride of this overflow, I had to wrap the column within a ListView Widget. It seems that the column cannot overflow, but the listview can.

Upvotes: 6

Loredana Zdr&#226;nc
Loredana Zdr&#226;nc

Reputation: 53

Your code works perfectly for me, I think the problem is caused by the properties set on Positioned widget parent. Can you provide me the entire code that builds the screen?

Upvotes: 0

Related Questions