CODEWITHSUNDEEP
flutter
Tizi Dev
Tizi Dev

Reputation: 311

How to set a specific Height of the container which wrap ListView.Builder

ListView.builder Need a size to be displayed, so often we put a container as parent of ListView.builder to display correctly the list. The problem are 2. The height we set are different per different device and I noticed problem with the last element of the list if there is a BottomNavigation bar that will cover the last element of the list this is an image: enter image description here

sorry if I cover but for privacy I need... anyway.. as you can see the last item of the list is covered by the BottomNav Bar how to define and fix this issue? Of could I could resize the container and make it more smaller but the problem will be with different device.

Upvotes: 0

Views: 455

Answers (2)

ahmed
ahmed

Reputation: 454

you should use MediaQuery under BuildContext then you can get the height and the width then do some math and that all you need to make a responsive app the picture of the app

void main() async {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(     
      home: Scaffold(
          body: Center(
        child: TheSize(),
      )),
    );
  }
}

class TheSize extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var height = size.height;
    var width = size.width;
    return Container(
      height: height / 2,
      width: width / 1.5,
      color: Colors.blue,
      child: Text('the height = $height | the width = $width '),
    );
  }
}

Upvotes: 1

Ali Mohammadzadeh
Ali Mohammadzadeh

Reputation: 686

you can wrap your ListView.builder with Expanded instead of Container. and more better to put it in Column then wrap it with Expanded widget.

Upvotes: 1

Related Questions