[Proposal] Expose `padding` for multi-line `TextField`

[domesticmouse]

Use case

I have a Flutter desktop app with a full bleed TextField with infinite maxLine contraint. The text comes too close to the edges of the window, and I'd like to pad the content.

I can pad the TextField on the left and right with a Padding widget, but I can't pad the top and bottom without creating an unsightly top and bottom gap during text scroll.

Proposal

Please expose something akin to BoxScrollView's padding property to multi-line TextField.

[nikitadol]

I can pad the TextView on the left and right with a Padding widget, but I can't pad the top and bottom without creating an unsightly top and bottom gap during text scroll.

Can you show the code?

[domesticmouse]

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: SizedBox.expand(
            child: TextField(
              decoration: null, // null = no blue underline
              maxLines: null, // null = infinite lines
              controller: _controller,
            ),
          ),
        ),
      ),
    );
  }
}

[maheshj01]

Hi @domesticmouse, Thanks for filing the issue. Looks like TextField has contentPadding But it shows the padding during scroll. Labeling this issue as a new feature.

code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: SizedBox.expand(
            child: TextField(
              decoration: const InputDecoration(
                  contentPadding: EdgeInsets.only(
                      top: 16, bottom: 16)), // null = no blue underline
              maxLines: null, // null = infinite lines
              controller: _controller,
            ),
          ),
        ),
      ),
    );
  }
}

[pedromassango]

Please expose something akin to BoxScrollView's padding property to multi-line TextView.

Did you mean TextField instead? as it is what I see in the code sample

[domesticmouse]

Please expose something akin to BoxScrollView's padding property to multi-line TextView.

Did you mean TextField instead? as it is what I see in the code sample

Whups, updated the bug text to match the code. Thanks!

[pedromassango]

Hello @justinmc, are you going to work on this? I would like to give it a go.