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

Vertical alignment of flutter text

Hi all I am trying to add a custom font ‘Gill Sans’ to my mobile app. However when I try and align an icon/ icon button and text on the same line they seem to look very out of alignment. It seems that this font is giving trouble the default flutter font has the correct alignment.

Does anyone know how I can correct the alignment? Thanks

This is what it is currently looking like, seems like the text is sitting too much towards the top.

Image of alignment incorrect

This is what it looks like with the standard flutter font and how I would like the alignment to look like:

Image of desired alignment

Here is a link to the font I am using. Gill Sans regular:

https://www.fontles.com/download/gill-sans-font/

Here is a snapshot of my code, using a simple list tile:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: App()));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Playground"),
        centerTitle: true,
      ),
      body: const ListTile(
        leading: Icon(Icons.home),
        minLeadingWidth: 0,
        title: Text(
          "Hello World",
          style: TextStyle(
            fontFamily: "Calibri",
          ),
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    I’ve faced same problem before, you could try to add style property inside the Text widget and add TextStyle with height property 1

    const Text(
    "Hello World",
    style: TextStyle(height: 1),
)

    You may want to check this one: How do set text line height in flutter?

    Login or Signup to reply.
  2. 0

    use this code:

    GestureDetector(
    onTap: () {
      // todo onTap
    },
    child: const Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.home),
        SizedBox(
          width: 5,
        ),
        Text(
          "Hello World",
          style: TextStyle(
            fontFamily: "Calibri",
          ),
        ),
      ],
    ),
  ),

    check pubspec.yaml And use this code to identify the font to the application

      fonts:
    - family: poppins
      fonts:
        - asset: fonts/Poppins-Black.ttf
          weight: 900
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search