Question 79656 in Flutter Question posted in
The official Flutter documentation can be found here.

How do i align my text to be inside a button? – Flutter

i need help with my app since iam new to flutter. so i have a button that suppossed to have a text inside it, but when i run my app, the text isnt inside the button, i dont know how to fix this. so here is my app when i run it:

enter image description here

i use MyButton for the button and text, here is my botton code


_addTaskBar(){
    return Container(
            margin: const EdgeInsets.only(left: 20, right: 20, top: 5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(DateFormat.yMMMMd().format(DateTime.now()),
                      style: subHeadingStyle,
                      ),
                      Text("Today", 
                      style: headingStyle,
                      )
                    ],
                  ),
                ),
                MyButton(label: "Add Reminder", onTap: ()=>Get.to(AddReminderPage()))
              ],
            ),
          );
  }

here is my MyButton code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child:Container(
        width: 100,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Color(0xFFFB7B8E),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ) ,
    );
  }
}

any help would mean so much to me. thankyou

Tags:

3

Answers


  1. 0

    Your text is now aligned with the left side of the container. It only looks outside because you have a rounded button, but the text is in fact exactly inside the container.
    What you might want is center the text. To center it horizontally in the column, replace crossAxisAlignment.start with crossAxisAlignment.center
    To center vertically, add a line at the below this one, with mainAxisAlignment.center

    If the text still overflow, you might need to make the button bigger

    If instead you would like the text to wrap, you can put it in a Flexible component, like in this question: Flutter- wrapping text

    Have a look at this page on how to align elements in columns and row.
    https://docs.flutter.dev/codelabs/layout-basics

    Login or Signup to reply.
  2. 0

    The Text widget in MyButton can be added to the Center widget

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child:Container(
        width: 100,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Color(0xFFFB7B8E),
        ),
        child: Center(
      child:Text(
          label,
          style: TextStyle(
            color: Colors.white,
          )),
        ),
      ) ,
    );
  }
}
    Login or Signup to reply.
  3. 0 
    Center(
child: Text("add reminder"))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search