CODEWITHSUNDEEP
flutterdart
Pamela
Pamela

Reputation: 475

Flutter - How to expand the containers in a List View Builder to fill the entire space?

I put containers in the listview builder where, when clicked, each of the 7 containers plays a sound. How to I wrap the containers/CustomButtonWidget so all 7 containers fill the vertical space?

enter image description here

This is the code

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/painting.dart';

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

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Expanded(
            child: ListView.builder(
              itemCount: 7,
              itemBuilder: (BuildContext context, int index) {
                return CustomButtonWidget(index: index);
              },
            ),
          ),
        ),
      ),
    );
  }
}

class CustomButtonWidget extends StatelessWidget {
  final int index;
  CustomButtonWidget({this.index});
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.zero),
      ),
      onPressed: () {
        playSound(index + 1);
      },
      child: Container(
        height: 80,
        width: 90,
        color: index.isOdd ? Color(0xffF8BBD0) : Color(0xffC2185B),
      ),
    );
  }
}

Upvotes: 0

Views: 625

Answers (3)

Ali Mohammadzadeh
Ali Mohammadzadeh

Reputation: 686

You can set your width of Container to double.infinity:

child: Container(
        height: 80,
        width: double.infinity,
        color: index.isOdd ? Color(0xffF8BBD0) : Color(0xffC2185B),
      ),

this is fill your horizontal space. Sorry I don't read your question carefully. for fill vertical Space other friends gave Answer

Upvotes: 0

scheinpablo
scheinpablo

Reputation: 96

Use the Expanded widget instead of Container.

Upvotes: 0

Jigar Patel
Jigar Patel

Reputation: 5423

One way you can do this is like this.

child: Container(
  height: MediaQuery.of(context).size.height/7,
  width: 90,
  color: index.isOdd ? Color(0xffF8BBD0) : Color(0xffC2185B),
),

Upvotes: 1

Related Questions