Flutter - 更改 OutlineInputBorder 的边框颜色

Posted

技术标签:

【中文标题】Flutter - 更改 OutlineInputBorder 的边框颜色【英文标题】:Flutter - Changing the border color of the OutlineInputBorder 【发布时间】:2018-10-24 08:19:35 【问题描述】:

我正在尝试更改OutlineInputBorder 的边框颜色,但尝试了很多方法都失败了。

我通过buildDarkTheme() 函数创建了整个主题配置,但我无法将边框颜色更改为黄色

下面是图片和代码:

import 'package:flutter/material.dart';

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

const kBlackHalf = const Color(0xFF212121);
const kBlackLight = const Color(0xFF484848);
const kBlack = const Color(0xFF000000);
const kYellow = const Color(0xFFffd600);
const kYellowLight = const Color(0xFFffff52);
const kYellowDark = const Color(0xFFc7a500);
const kWhite = Colors.white;

ThemeData buildDarkTheme() 
  final ThemeData base = ThemeData();
  return base.copyWith(
    primaryColor: kBlack,
    accentColor: kYellow,
    scaffoldBackgroundColor: kBlackHalf,
    primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
    primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
    buttonColor: kYellow,
    textTheme: buildTextTheme(base.textTheme, kWhite),    
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderSide: BorderSide(color: kYellow)
      ),
      labelStyle: TextStyle(
        color: kYellow,
        fontSize: 24.0
      ),
    ),
  );


TextTheme buildTextTheme(TextTheme base, Color color) 
  return base.copyWith(
    body1: base.headline.copyWith(color: color, fontSize: 16.0),
    caption: base.headline.copyWith(color: color),
    display1: base.headline.copyWith(color: color),
    button: base.headline.copyWith(color: color),
    headline: base.headline.copyWith(color: color),
    title: base.title.copyWith(color: color),
  );


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      theme: buildDarkTheme(),
      home: new HomePage(),
    );
  


class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => new _HomePageState();


class _HomePageState extends State<HomePage> 
  String xp = '0';

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          new IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: () ,
          )
        ],
      ),
      body: new Container(
        padding: new EdgeInsets.only(top: 16.0),
        child: new ListView(
          children: <Widget>[
            new InkWell(
              onTap: () ,
              child: new InputDecorator(
                decoration: new InputDecoration(          
                  labelText: 'XP',
                  border: OutlineInputBorder()
                ),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new Text(this.xp),
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  

更多参考资料:

Not able to change TextField Border Color

https://github.com/flutter/flutter/issues/17592

【问题讨论】:

作为一个建议,我会如你所愿,但这个边框颜色是基于你的主题原色,它总是黑色的,因为你的原色是黑色。因此,请尝试“OutlineInputBorder”以外的其他小部件。快乐编码! 【参考方案1】:

自 7 月起,您现在可以使用 enabledBorder:

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      // width: 0.0 produces a thin "hairline" border
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    border: const OutlineInputBorder(),
    labelStyle: new TextStyle(color: Colors.green),
    ...
  ),
)

查看full documentation 了解新的装饰器

【讨论】:

是的,这是可行的,仅设置边框不适用于颜色,也不适用于边框大小,但实际上将其更改为圆形边框!让我困惑的奇怪行为! 这个解决方案对我不起作用。我正在使用 Flutter 2.5 版本。非常感谢。【参考方案2】:

像这样将 hintColor 添加到您的主题中,它应该会更改 OutlineInputBorder 颜色。

ThemeData buildDarkTheme() 
  final ThemeData base = ThemeData();
  return base.copyWith(
    primaryColor: kBlack,
    accentColor: kYellow,
    scaffoldBackgroundColor: kBlackHalf,
    primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
    primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
    buttonColor: kYellow,
    hintColor: YOUR_COLOR,
    textTheme: buildTextTheme(base.textTheme, kWhite),    
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(),
      labelStyle: TextStyle(
        color: kYellow,
        fontSize: 24.0
      ),
    ),
  );

【讨论】:

【参考方案3】:

这是上述问题的解决方案,如果用户未单击 TextField,则使用 enabledBorder;如果用户单击 TextField,则使用 focusBorder。

 enabledBorder: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide:  BorderSide(color: Colors.pinkAccent ),

      ),
      focusedBorder: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide:  BorderSide(color: Colors.pinkAccent ),

      ),

【讨论】:

非常感谢亲爱的,工作就像魅力一样,救了我的命 :)【参考方案4】:

这会将按钮的轮廓颜色更改为蓝色

new OutlineButton(
   borderSide: BorderSide(color: Colors.blue),
) 

【讨论】:

这不起作用并且从未起作用。为什么还要建议呢?你测试过吗? github.com/flutter/flutter/issues/18751【参考方案5】:

您只需在 InputDecoration 中提供“enabledBorder”参数

enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.yellow),
              ),

【讨论】:

【参考方案6】:

将您的TextField 包装在Theme 小部件中。

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.white), // set color here
  child: TextField(),
)

【讨论】:

【参考方案7】:

只需更改 ThemeData 的 hintColor 属性,如下所示:

Theme(
    data: ThemeData(
      primaryColor: kYellowDark,
      hintColor: kYellow,
    ),
    child: Material(....),
);

【讨论】:

【参考方案8】:

要更改卡片的边框颜色,请使用以下代码

new Card(
      shape: const RoundedRectangleBorder(
        side: BorderSide(color: Colors.blue),
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
      child: Container(new Text("Text in a card"))

【讨论】:

【参考方案9】:

对原始问题的最具体和最简单的答案:

 Theme(
          data: Theme.of(context).copyWith(primaryColor: Colors.blue),
          child: TextField(
            decoration: InputDecoration(
                border: OutlineInputBorder(), labelText: 'Some Label'),
          ),
        ),

原色定义 OutlineInputBorder 小部件的边框颜色。只需使用 Theme 小部件包装您的 TextField 并覆盖原色。

【讨论】:

以上是关于Flutter - 更改 OutlineInputBorder 的边框颜色的主要内容,如果未能解决你的问题,请参考以下文章

VSCode Flutter - 停止跟踪 Flutter repo 更改

如何在flutter中更改公司域名?

Flutter 动态更改应用程序启动图标

如何在 Flutter 中更改布局

如何更改 Flutter 应用程序的名称?

Flutter - 如何更改 CheckboxListTile 大小?