CODEWITHSUNDEEP
flutterdart
Zeffry Reynando
Zeffry Reynando

Reputation: 3909

Flutter : Listview Builder Horizontal Inside Stack Widget

I have design like above, In that design I implement to app. I have Stack Widget inside container then inside Stack widget i have ListviewBuilder with Scroll direction Horizontal. But the problem is, I cant scroll ListViewBuilder Horizontal inside Stack widget. How can i fixed this ?

My Trial Fail

enter image description here

Source Code

class HomeScreen extends StatelessWidget {
  static const routeName = "/home-screen";
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    final mqWidth = MediaQuery.of(context).size.width;

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Good Morning'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => "",
            )
          ],
        ),
        body: SingleChildScrollView(
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: mqHeight / 3,
              child: Stack(
                overflow: Overflow.visible,
                children: <Widget>[
                  Container(
                    color: Colors.red,
                  ),
                  Positioned(
                    top: mqHeight / 4.5,
                    child: SizedBox(
                      height: 100,
                      child: ListView.builder(
                        physics: ClampingScrollPhysics(),
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: 20,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            width: 100,
                            child: Card(
                                elevation: 10,
                                child: Icon(Icons.card_giftcard)),
                          );
                        },
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              child: Text(
                'data   data   data   data   data   data   data   data   data   ',
                style: Theme.of(context).textTheme.display4,
              ),
            )
          ],
        )),
      ),
    );
  }
}

Upvotes: 0

Views: 5390

Answers (2)

dat ha minh
dat ha minh

Reputation: 141

I have already fixed as below:

Positioned(
  top: mqHeight / 4.5,
  left: 0, /// <-- fixed here
  right: 0, /// <-- fixed here
  child: SizedBox(
    height: 100,
    child: ListView.builder(
      physics: ClampingScrollPhysics(),
      scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100,
            child: Card(
              elevation: 10,
                child: Icon(Icons.card_giftcard)),
          );
        },
      ),
    ),
 )```

Upvotes: 2

chunhunghan
chunhunghan

Reputation: 54447

You can copy paste run full code below
From https://github.com/flutter/flutter/issues/36584#issuecomment-554950474
Add top, right, bottom attribute
code snippet 

Positioned(
                        top: mqHeight / 4.5,
                        left:0.0,
                        right:0.0,
                        bottom:0.0,
                        child: SizedBox(
                          height: 100,
                          child: ListView.builder(

working demo

enter image description here

full code 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  static const routeName = "/home-screen";
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    final mqWidth = MediaQuery.of(context).size.width;

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Good Morning'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => "",
            )
          ],
        ),
        body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: mqHeight / 3,
                  child: Stack(
                    overflow: Overflow.visible,
                    children: <Widget>[
                      Container(
                        color: Colors.red,
                      ),
                      Positioned(
                        top: mqHeight / 4.5,
                        left:0.0,
                        right:0.0,
                        bottom:0.0,
                        child: SizedBox(
                          height: 100,
                          child: ListView.builder(
                            physics: ClampingScrollPhysics(),
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                            itemCount: 20,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                child: Card(
                                    elevation: 10,
                                    child: Icon(Icons.card_giftcard)),
                              );
                            },
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  child: Text(
                    'data   data   data   data   data   data   data   data   data   ',
                    style: Theme.of(context).textTheme.display4,
                  ),
                )
              ],
            )),
      ),
    );
  }
}

Upvotes: 5

Related Questions