Flutter remove padding from text

by

Flutter: Removing Padding from Text

When working with text in Flutter, you may notice some padding around the text widget. This is the default behavior provided by the framework to give some breathing space for the text content.

If you want to remove the padding and have the text directly against the edges of the parent container, you can make use of the EdgeInsets class and set its properties to zero.

Example:

    
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Removing Text Padding Example'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.zero, // Setting EdgeInsets.zero to remove padding
            child: Text(
              'Hello Flutter',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

In the above example, we are creating a simple Flutter application with an app bar and a text widget placed in the center of the screen. By setting the padding property of the container to EdgeInsets.zero, we effectively remove any padding around the text inside the container.

You can adjust the font size and other visual properties of the text by modifying the TextStyle class as per your requirements.

Leave a comment