web-dev-qa-db-fra.com

Flutter - Modification de la couleur de la bordure de OutlineInputBorder

J'essaie de changer la couleur de la bordure de la OutlineInputBorder mais j'ai essayé de nombreuses façons et j'ai échoué.

J'ai créé la configuration entière du thème via la fonction buildDarkTheme() mais je ne peux pas changer la couleur de la bordure en jaune

Ci-dessous, l'image et le code:

 enter image description here 

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),
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

Pour plus de références:

Impossible de changer la couleur de la bordure TextField

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

dartflutter
9
rafaelcb21

Ajoutez hintColor à votre thème de cette manière et cela devrait changer la couleur 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
      ),
    ),
  );
}
7
Brian Roper

Depuis juillet, vous pouvez maintenant utiliser 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),
    ...
  ),
)

Voir la documentation complète pour les nouveaux décorateurs

1
Jannie Theunissen

Cela changera la couleur de contour du bouton en bleu

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

Pour changer la couleur de la bordure d'une carte, utilisez le code ci-dessous.

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"))
0
fritz-playmaker

Il suffit de changer la propriété hintColor pour ThemeData, comme ceci:

Theme(
    data: ThemeData(
      primaryColor: kYellowDark,
      hintColor: kYellow,
    ),
    child: Material(....),
);
0
Luis Fernando Pazmiño