Cannot get rid of the "BOTTOM OVERFLOW BY 24 PIXELS"

[theo lungcayana]

Can anyone please help? I have tried everything I've searched on stackoverflow but nothing helps. This is the actual problem.

This is my main.dart

import 'package:flutter/material.dart';
import 'package:maxwax_loyalty/login/login_page.dart';
import 'package:flutter/services.dart';
import 'constants.dart';
import 'package:maxwax_loyalty/home/home_page.dart';
import 'package:maxwax_loyalty/pages/services_page.dart';
import 'pages/branches_page.dart';

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

class LoyaltyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _portraitModeOnly();
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: buildDarkTheme(context),
      initialRoute: LoginPage.id,
      routes: {
        LoginPage.id: (context) => LoginPage(),
        HomePage.id: (context) => HomePage(),
        ServicesPage.id: (context) => ServicesPage(),
        BranchesPage.id: (context) => BranchesPage(),
      },
    );
  }
}

ThemeData buildDarkTheme(context) {
  final ThemeData base = ThemeData();
  return base.copyWith(
    primaryColor: kMxOrange,
    accentColor: kMxOrange,
    backgroundColor: kMxOrange,
    buttonColor: kWhite,
    hintColor: kWhite,
    textTheme: Theme.of(context).textTheme.apply(
          bodyColor: kWhite,
          displayColor: kWhite,
        ),
  );
}

void _portraitModeOnly() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
}

This is my branches_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:maxwax_loyalty/container_template.dart';
import 'package:maxwax_loyalty/constants.dart';
import 'package:maxwax_loyalty/components/branches/branches_card.dart';

class BranchesPage extends StatefulWidget {
  static String id = 'branches_page';

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

class _BranchesPageState extends State<BranchesPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ContainerTemplate(
        appBar: AppBar(
          title: Text('Branches'),
          backgroundColor: kMxOrange,
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              BranchesCard(
                name: 'Alabang Town Center',
                contactNumber: '804-3361',
                address:
                    'Service Town Alabang Town Center, Brgy. Ayala Alabang, Muntinlupa City',
                startIndent: 68.0,
                endIndent: 68.0,
              ),
              BranchesCard(
                name: 'Ayala Malls The 30th',
                contactNumber: '477-6164',
                address: '30 Meralco Avenue, Pasig City',
                startIndent: 70.0,
                endIndent: 70.0,
              ),
              BranchesCard(
                name: 'SM Aura',
                contactNumber: '856-9335',
                address: 'Basement 1, SM Aura, McKinley Pkwy, Taguig City',
                startIndent: 130.0,
                endIndent: 130.0,
              ),
              BranchesCard(
                name: 'U.P. Town Center',
                contactNumber: '+63 965-368-7791',
                address:
                    'U.P. Town Center, 216 Katipunan Ave, Diliman, Quezon City',
                startIndent: 90.0,
                endIndent: 90.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

And this is my branches_card.dart

import 'package:flutter/material.dart';
import 'package:maxwax_loyalty/constants.dart';

class BranchesCard extends StatelessWidget {
  BranchesCard({
    this.name,
    this.contactNumber,
    this.address,
    this.startIndent,
    this.endIndent,
  });

  final String name;
  final String contactNumber;
  final String address;
  final double startIndent;
  final double endIndent;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 20, 10, 0),
      padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
      decoration: BoxDecoration(
        color: Color(0x4D000000),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Column(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                name,
                style: TextStyle(
                  color: kMxOrange,
                  fontSize: 20,
                ),
              ),
              SizedBox(
                height: 5.0,
              ),
              SizedBox(
                child: Divider(
                  height: 10.0,
                  color: Color(0x59FFFFFF),
                  thickness: 1,
                  indent: startIndent,
                  endIndent: endIndent,
                ),
              ),
            ],
          ),
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Color(0x59000000),
            ),
            margin: EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.phone,
                      color: kWhite,
                    ),
                    title: Text(
                      contactNumber,
                      style: TextStyle(
                        color: kWhite,
                      ),
                      textAlign: TextAlign.justify,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.near_me,
                      color: kWhite,
                    ),
                    title: Text(
                      address,
                      style: TextStyle(
                        color: kWhite,
                      ),
                      textAlign: TextAlign.justify,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[drexel.ue]

Have you tried wrapping your column in branches_page.dart in a SingleChildScrollView?

[Andy Greenshaw]

Put the Column on branches page inside a SingleChildScrollView

 

---

From: flutt...@googlegroups.com on behalf of theo lungcayana <theolung...@gmail.com>
Sent: Saturday, December 7, 2019 11:50 am
To: Flutter Development (flutter-dev)
Subject: Cannot get rid of the "BOTTOM OVERFLOW BY 24 PIXELS"

 

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/d0626118-8c47-4512-bb89-fc6e03da5a19%40googlegroups.com.

[theo lungcayana]

Pardon me. I forgot to include this file. The SingleChildScrollView is in this file named container_template.dart. This is the code.

import 'package:flutter/material.dart';
import 'constants.dart';

class ContainerTemplate extends StatelessWidget {
  ContainerTemplate({this.child, this.appBar});

  final child;
  final AppBar appBar;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: appBar,
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(kBgHomePage), fit: BoxFit.cover),
            ),
          ),
          LayoutBuilder(
            builder: (context, constraint) {
              return SingleChildScrollView(
                child: ConstrainedBox(
                  constraints: BoxConstraints(minHeight: constraint.maxHeight),
                  child: IntrinsicHeight(
                    child: child,
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

[Andy Greenshaw]

I think it should be like this (ContainerTemplate)

LayoutBuilder(

builder: (context, constraint) {

return ConstrainedBox(

constraints: BoxConstraints(minHeight: constraint.maxHeight),

child: IntrinsicHeight(

child: SingleChildScrollView(

child: child,

),

),

);

},

),

On 7 Dec 2019, 11:50 +0000, theo lungcayana <theolung...@gmail.com>, wrote:

Can anyone please help? I have tried everything I've searched on stackoverflow but nothing helps. This is the actual problem.

[vivek sakpal]

resizeToAvoidBottomPadding: true,

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/cf55a90d-fd35-4486-95eb-a4e707781c97%40Spark.

[Sam Cromer]

I have the same issue all over my app , tried everything 

Sent from my iPhone

On Dec 7, 2019, at 4:50 AM, theo lungcayana <theolung...@gmail.com> wrote:



Can anyone please help? I have tried everything I've searched on stackoverflow but nothing helps. This is the actual problem.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/d0626118-8c47-4512-bb89-fc6e03da5a19%40googlegroups.com.

<Screenshot_2019_1207_193827.png>

[theo lungcayana]

This solved my problem. Thank you very much for your help. Much appreciated ^_^

To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.