Search code examples
flutterflutter-dependencies

Flutter bottom overflowed by

All of my bottomappbar code and everything about how my code looks is available below. No matter what I did, I couldn't fix it, I need help :/ All of my bottomappbar code and everything about how my code looks is available below. No matter what I did, I couldn't fix it, I need help :/All of my bottomappbar code and everything about how my code looks is available below. No matter what I did, I couldn't fix it, I need help :/

enter image description here

    bottomNavigationBar: BottomAppBar(
      color: Colors.grey[900],
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 8.0),
        child: Container(
          height: 90, // İstediğiniz yüksekliğe göre bu değeri ayarlayabilirsiniz.
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
            IconButton(
              icon: Column(
                children: [
                  Image.asset('assets/bomba.png', width: 50, height: 50), // Boyut ayarları
                  SizedBox(height: 1), // İkon ile metin arasındaki mesafe
                  Text(
                    '$_jokerCount',
                    style: TextStyle(fontSize: 10, color: Colors.white), // Metin stili
                  ),
                ],
              ),
              onPressed: () {
                _eliminateTwoWrongChoices();
              },
            ),
            IconButton(
              icon: Image.asset('assets/doktor.png'),
              onPressed: () {
                _selectCorrectAnswer();
              },
            ),
            IconButton(
              icon: Image.asset('assets/süre.png'),
              onPressed: () {
                setState(() {
                  _remainingTime += 15;
                });
              },
            ),

            IconButton(
              icon: Image.asset('assets/skip.png'),
              onPressed: () {
                Navigator.of(context).pop();
                Navigator.of(context).popUntil((route) => route.isFirst);
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => SpinningWheel(jetonSayisi: widget.jetonSayisi, jetonAzalt: widget.jetonAzalt,) //The getter 'jetonAzalt' isn't defined for the type 'QuestionPage'.
                  ),
                );
              },
            ),
          ],
        ),
      ),
    ),
  ),
  ),
);

} }

Solution

  • Consider Using FittedBox

    try to use FittedBox and it will fit the availaible space for you , but it will decrease the size of the image if needed, also consider using expanded for responsive layout,

    BottomAppBar(
        color: Colors.grey[900],
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 8.0),
          child: SizedBox(
            height: 90,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                FittedBox(
                  child: IconButton(
                    icon: const Column(
                      children: [
                        Icon(Icons.abc),
                        Text(
                          '2',
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        ),
                      ],
                    ),
                    onPressed: () {},
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.abc),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.abc),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.abc),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ),

    Output