Flutter - Text elements using material3 take up more space than material2. How to set text height globally to match material2?

Jonas
May 29, 2023
128 views
0 votes
2 Answers

It seems with material3 the height of the Text was increased, meaning even though I use the same fontSize before and after the update to material3, the text takes up more space. In my case, this leads to overflow errors in some cases.

I found I can fix this when setting height: 1 of the TextStyle but to do so, I would need to set this to each text element individually.

Is there a way I can use the "old spacing"? Meaning setting the height of the text elements globally to match the height of the text elements from material2?

Tags: flutter

Answers

- Ho224ngLongNguyn
- May 29, 2023 at 12:38 pm
- 0 votes
0
You can use DefaultTextStyle in builder of MaterialApp:

Example:
```
            MaterialApp(
                home: const HomeScreen(),
                builder: (context, child) => DefaultTextStyle(
                  style: const TextStyle(height: 1),
                  child: child!,
                ),
              ),
```
Login or Signup to reply.

- Emirhan214zgeli
- May 29, 2023 at 12:39 pm
- 0 votes
0
With the update to Material3, there have been some changes to typography and text rendering, which may affect the spacing and height of text elements. If you want to maintain the same spacing as in Material2, you can override the default text theme settings in your Flutter app.

You can create a custom TextTheme and apply it globally to your app’s theme. Here’s an example of how you can do this:
```
import 'package:flutter/material.dart';

final textTheme = TextTheme(
  headline1: TextStyle(fontSize: 24, height: 1.0), // Customize the height as per your needs
  headline2: TextStyle(fontSize: 20, height: 1.0),
  headline3: TextStyle(fontSize: 18, height: 1.0),
  // Add more text styles as needed
);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        textTheme: textTheme, // Apply the custom text theme
        // Add other theme customizations as needed
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My App')),
      body: Center(
        child: Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline1, // Use the custom text style
        ),
      ),
    );
  }
}
```
In the example above, we define a custom TextTheme and override the height property of each text style to match the spacing of Material2. Then, we apply this custom text theme to the app’s overall theme using the textTheme property. Finally, when using the Text widget, you can specify the desired text style by accessing it from the app’s theme using Theme.of(context).textTheme.headline1.

By customizing the TextTheme in this way, you can maintain the old spacing of text elements throughout your app. Adjust the font sizes and other properties according to your specific requirements.
Login or Signup to reply.