How to override a theme for a single widget?

user_2079612 0
Viewed 786

My Flutter app has theming that adds a border around TextFields:

ThemeData(
    ...
    inputDecorationTheme: InputDecorationTheme(
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(width: 1.0),
        ),
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(width: 1.0),
        ),
    )

However, I do have one TextField that I don't want border, so I tried to override the border in the TextField:

TextField(
    decoration: InputDecoration.collapsed(
        hintText: _hintText,
        border: InputBorder.none,
      ),
    controller: _textController,
),

But I'm still getting the border? Below is a partial image. The "Enter please!" fields use the theme defaults and the "Question" fields are the one I'm trying to override.

enter image description here

flutter textfield
1 Answers

Wrap the one you want to override with a Theme widget and put a new ThemeData widget for the data property.

return MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.orange,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: Scaffold(
    body: Column(children: [
      TextFormField(), // Takes the theme of the overall MaterialApp
      Theme(
        data: ThemeData(
          primarySwatch: Colors.blue,
        ),
        child: TextFormField(), // Takes the theme of its direct parent
      ),
    ]),
  ),
);

This basic example just changes colors, so use whatever ThemeData you like.

user_136038950
Related