webentwicklung-frage-antwort-db.com.de

Flutter - Ändern der Rahmenfarbe von OutlineInputBorder

Ich versuche die Rahmenfarbe von OutlineInputBorder zu ändern, habe aber unzählige Möglichkeiten ausprobiert und ist fehlgeschlagen.

Ich habe die gesamte Theme-Konfiguration mit der Funktion buildDarkTheme() erstellt, kann aber die Rahmenfarbe nicht in Gelb ändern

Unten ist das Bild und der 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),
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

Für weitere Referenzen:

TextField-Rahmenfarbe kann nicht geändert werden

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

9
rafaelcb21

Fügen Sie Ihrem Design hintColor hinzu und die OutlineInputBorder-Farbe sollte geändert werden. 

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

Seit Juli können Sie enabledBorder jetzt verwenden:

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),
    ...
  ),
)

In der vollständigen Dokumentation finden Sie die neuen Dekorateure

1

Wickle dein TextField in das Theme Widget.

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

Dadurch wird die Umrissfarbe der Schaltfläche in Blau geändert

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

Verwenden Sie den folgenden Code, um die Randfarbe einer Karte zu ändern

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

Ändern Sie einfach die hintColor-Eigenschaft für ThemeData, z.

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