0

I have a SliverAppBar and i am trying to position three items in a row:

  • User Profile Picture
  • User Account Information
  • Notification bar widget

But whenever i try to add the User Account Information Widget in the row i either get a render flex error or it gets positions incorrectly and get out of sight.

This is what i've tried and i will give the code snippets my SliverAppBar.

  • Using a flexibleSpace with a FlexibleSpaceBar() widget and wrapping the title in a row where i then instantiate the 3 widgets.

HomeAccountPicture(), HomeAccountDetails(), NotificationsButtonWidget(),

as the child.

  • I made sure the respective widgets are just wrapped in 'Containers()`

This is my Sliver App Snippet

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    controller.initScrollController();
    return WillPopScope(
      onWillPop: Helper().onWillPop,
      child: Scaffold(
        body: RefreshIndicator(
            onRefresh: () async {
              Get.find<LaravelApiClient>().forceRefresh();
              controller.refreshHome(showMessage: true);
              Get.find<LaravelApiClient>().unForceRefresh();
            },
            child: CustomScrollView(
              physics: const AlwaysScrollableScrollPhysics(),
              controller: controller.scrollController,
              shrinkWrap: false,
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Color(0xffFFFFFF),
                  expandedHeight: MediaQuery.of(context).size.height * 0.25,
                  elevation: 0.5,
                  //pinned: true,
                  floating: false,
                  iconTheme: IconThemeData(color: Get.theme.primaryColor),
                  centerTitle: true,
                  flexibleSpace: FlexibleSpaceBar(
                    title: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        HomeAccountPicture(),
                        HomeAccountDetails(),
                        NotificationsButtonWidget(),
                      ],
                    ),
                  ),
                  automaticallyImplyLeading: false,
              
                ),
                SliverToBoxAdapter(
                  child: Wrap(
                    children: [
                      BookingsListWidget(),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

This is my expectation

Expectation

This is what i get

What i get

tesseract
  • 144
  • 1
  • 12

0 Answers0