Home > Enterprise >  Flutter SinglechildScrollview with column
Flutter SinglechildScrollview with column

Time:01-30

I want the body of my page to slide, but I couldn't get it to work. Widgets on the page compress themselves instead of sliding. When I use single child scrollview, I get a hassize error. If you could help with this situation, I would greatly appreciate it. so far I have used singlechildscrollview and custom scroll but without success. I don't know if there is something I've overlooked. I will be glad if you help

SafeArea(
            child: Scaffold(
              body: Stack(
                children: [
                  CustomAppbar(
                    homeIcon: true,
                  ),
                  CustomBody(
                    height: MediaQuery.of(context).size.height * 0.7.w,
                   
                      child: Column(
                        children: [
                           Padding(
                              padding: EdgeInsets.fromLTRB(25, 50, 25, 50),
                              child: ListView.builder(
                                shrinkWrap: true,
                                itemCount: 1,
                                itemBuilder: (context, index) {
                                  return Column(
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(25),
                                        child: Container(
                                          decoration:
                                              buildProductContainerBoxDecoration(),
                                          // PRODUCTS
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              //PRODUCT TITLE-SUBTITLE
                                              buildProductTitleAndSubTitle(),
    
                                              // PRODUCT IMAGE-COUNTER
                                              Row(
                                                mainAxisSize: MainAxisSize.min,
                                                mainAxisAlignment:
                                                    MainAxisAlignment.spaceEvenly,
                                                children: [
                                                  //PRODUCT IMAGE
                                                  buildProductImage(),
    
                                                  //PRODUCT COUNTER
                                                  Spacer(),
                                                  buildIncrementButton(viewModel),
                                                  buildProductCount(viewModel),
                                                  buildDecrementButton(viewModel),
                                                  Spacer(),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ],
                                  );
                                },
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextField(
                                decoration: InputDecoration(
                                    hintText: 'Açıklama',
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(12))),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextField(
                                decoration: InputDecoration(
                                    hintText: 'Açıklama',
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(12))),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextField(
                                decoration: InputDecoration(
                                  hintText: 'Açıklama',
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Card(
                              child: ListTile(
                                title: Text('ADRES BAŞLIĞIM'),
                                subtitle: Text('ADRESİM'),
                                trailing: Icon(
                                  Icons.navigate_next_outlined,
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Card(
                              child: ListTile(
                                title: Text('ADRES BAŞLIĞIM'),
                                subtitle: Text('ADRESİM'),
                                trailing: Icon(
                                  Icons.navigate_next_outlined,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
 

EDIT

I edited my custom body widget like this but the result did not change.

class CustomBody extends StatelessWidget {
  final Widget? child;
  final double height;

  CustomBody({Key? key, this.child, required this.height}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.bottomCenter,
          child: CustomScrollView(
            shrinkWrap: true,
            slivers: [
              SliverToBoxAdapter(
                child: Container(
                  height: height,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(60),
                      topRight: Radius.circular(60),
                    ),
                  ),
                  child: child,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

enter image description here

CodePudding user response:

Did you try putting singlechildscrollview on custombody?

CodePudding user response:

cannot be more than 1 Expanded widget in a column. the best option is using a CustomScrollView like this :

Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(height: 50, color: Colors.red), // your widget here
                Container(height: 50, color: Colors.green), // your widget here
                Container(height: 50, color: Colors.green), // your widget here
                Container(
                  height: 300,
                  color: Colors.grey,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('test'),
                      Text('test'),
                      Text('test'),
                      Text('test'),
                    ],
                  ),
                ), // your widget here
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 20),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(height: 50, color: Colors.red), // your widget here
                Container(height: 50, color: Colors.green), // your widget here
                Container(height: 50, color: Colors.green), // your widget here
                Container(
                  height: 300,
                  color: Colors.grey,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('test'),
                      Text('test'),
                      Text('test'),
                      Text('test'),
                    ],
                  ),
                ), // your widget here
              ],
            ),
          ),
        ],
      ),
    )
  •  Tags:  
  • Related