Skip to content

OutlineInputBorder doesn't respect BorderSide's strokeAlign #179850

Description

@PiotrRogulski

Steps to reproduce

  1. Add an OutlineInputBorder to a text field.
  2. Specify a BorderSide with a strokeAlign different from the default strokeAlignInside.

Expected results

The border around the text field is able to be drawn on the outside or centered around the filled inside.

Actual results

The border is always drawn on the inside of the text field area.

Code sample

Code sample
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: .min,
            spacing: 32,
            children: [
              TextFormField(
                initialValue: 'Hi',
                decoration: .new(
                  labelText: 'Inside',
                  filled: true,
                  fillColor: Colors.lightBlue,
                  enabledBorder: OutlineInputBorder(
                    borderSide: .new(
                      width: 4,
                      strokeAlign: BorderSide.strokeAlignInside,
                    ),
                  ),
                ),
              ),
              TextFormField(
                initialValue: 'Hi',
                decoration: .new(
                  labelText: 'Center',
                  filled: true,
                  fillColor: Colors.lightBlue,
                  enabledBorder: OutlineInputBorder(
                    borderSide: .new(
                      width: 4,
                      strokeAlign: BorderSide.strokeAlignCenter,
                    ),
                  ),
                ),
              ),
              TextFormField(
                initialValue: 'Hi',
                decoration: .new(
                  labelText: 'Outside',
                  filled: true,
                  fillColor: Colors.lightBlue,
                  enabledBorder: OutlineInputBorder(
                    borderSide: .new(
                      width: 4,
                      strokeAlign: BorderSide.strokeAlignOutside,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration Image

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.38Found to occur in 3.38found in release: 3.40Found to occur in 3.40frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions