The code below, is the main page of my app. When I want to make a new icon/button, it's only could make up to 4, if I make it to 5 or more, the 5th button that I make is not showing up in my app which showing text "bottom overflowed" like this.

so how to make this page scrollable? and here is my code on this main page.

import 'package:bacaan_sholat/page/bacaan_sholat_page.dart';
import 'package:bacaan_sholat/page/niat_sholat_page.dart';
import 'package:flutter/material.dart';

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

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

class _MainPageState extends State<MainPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.green.shade100,
     body: SafeArea(
       child: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => NiatSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_niat.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Doa Harian Muslim",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(context,
                         MaterialPageRoute(builder: (context) => AyatKursi()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_bacaan.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Ayat Kursi",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }
}

Any help or advice is really helpful and meaningful for me and thanks in advance. I'm sorry if this question quite messy 'cause this is my first question.

CodePudding user response：

Wrap your Column widget with SingleChildScrollView so rest of your content will scrollable.

CodePudding user response：

Wrap it with SingleChildScrollView and that's pretty much it!

...
body: SafeArea(
  child: SingleChildScrollView(
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.all(10),
...

Note: Since you are using SingleChildScrollView the MainAxisAlignment.center will make no changes so consider removing that.