flutter 主题_在Flutter中使用主题

flutter 主题

One great aspects of Flutter is its use of UI packages like the Material and Cupertino design systems. They work to shortcut all of the minute and repetitive design choices like the appBar height or the shadows on buttons. But obviously always using the same default design patterns would quickly lead to a lot of very boring looking apps. We’re going to explore some of the methods for changing the overall look across our apps with Flutter themes.

Flutter的一大优点是它使用了UI包，例如Material和Cupertino设计系统。 它们可以快捷地完成所有细微而重复的设计选择，例如appBar高度或按钮上的阴影。 但是显然总是使用相同的默认设计模式会很快导致很多非常无聊的应用程序。 我们将探讨一些使用Flutter主题更改应用程序整体外观的方法。

样板 (Boilerplate)

For the sake of simplicity, we’re just going to the use a demo counter app and focus on the Material design library, since they have everything we need to get started.

为了简单起见，我们将使用演示计数器应用程序，并专注于Material设计库，因为它们具有我们入门所需的一切。

main.dart

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

默认主题 (Default Themes)

Google’s Material package comes with two baked-in themes, a light version (which is the default) and a dark version, if that’s more your style.

Google的Material包带有两个固定的主题，浅色版本(默认设置)和深色版本(如果您更喜欢这种风格)。

To set our styles across our entire app we need to set the theme to a method on ThemeData in the MaterialApp widget, in this case either the light() or dark() options.

要在整个应用程序中设置样式，我们需要在MaterialApp小部件中的ThemeData主题设置为方法，在本例中为light()或dark()选项。

main.dart

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

That’s cool and all, but it’s still extremely limiting. Let’s jazz it up a bit.

那很酷，但仍然非常有限。 让我们爵士一点。

全球主题 (Global Themes)

Instead of using a method on ThemeData we can pass what we want to change directly into it. There’s a long list of what we can alter like the primaryColor, fontFamily, and even the cursorColor. You can explore the full list here, which may seem a bit overwhelming, but you really can do a lot with just a few of them.

代替在ThemeData上使用方法，我们可以将想要更改的内容直接传递给它。 还有很长的什么样，我们可以改变像列表primaryColor ， fontFamily ，甚至cursorColor 。 您可以在此处浏览完整列表，这似乎有些不胜枚举，但仅使用其中几个，您确实可以做很多事情。

A few of the properties on ThemeData also have a brightness counterpart, these just control the widgets on top of them. So accentColor would change the button but accentColorBrightness will change the text or icon on the button. We need to use either the light or dark properties on Brightness to do that.

ThemeData上的一些属性也具有亮度对应项，这些属性仅控制它们顶部的小部件。 因此， accentColor将更改按钮，而accentColorBrightness将更改按钮上的文本或图标。 为此，我们需要使用Brightness的light或dark属性。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
        accentColorBrightness: Brightness.dark
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

适应主题 (Adapting Themes)

That’s cool and all, but what if we like most parts of a theme and want to just change a few things without having to rewrite the whole thing? To extend a theme, we can use the copyWith method to extend it and pass in our custom styles.

那很酷，但是，如果我们喜欢某个主题的大部分内容，并且只想更改一些内容而不必重写整个内容，该怎么办？ 要扩展主题，我们可以使用copyWith方法来扩展主题并传递自定义样式。

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData.dark().copyWith(
    primaryColor: Colors.purple[800],
    accentColor: Colors.amber,
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

使用主题 (Using Themes)

Right now, altering our theme will only influence our UI when we’re using the Material widgets. When we create something like a scaffold, it’s using ThemeData as the default for all of its styles until we explicitly pass something in. If we wanted to create a new, unique, widget it wouldn’t know to use something like primaryColor as its background color. We can use Theme.of() to access all of the properties on ThemeData.

目前，只有在使用“材质”小部件时，更改主题才会影响UI。 当我们创建诸如脚手架之类的东西时，它会使用ThemeData作为其所有样式的默认样式，直到我们明确传递一些东西为止。如果我们想创建一个新的，独特的小部件，它将不知道会使用primaryColor这样的东西作为背景颜色。 我们可以用Theme.of()来访问所有属性上ThemeData 。

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  backgroundColor: Theme.of(context).accentColor,
  child: Icon(Icons.add),
),

结论 (Conclusion)

To some, Flutter themes may still seem very limiting when compared to the flexibility of CSS, but they are still one of the fundamental aspects of creating a consistent-looking app and keeping your codebase DRY.

在某些情况下，与CSS的灵活性相比，Flutter主题似乎仍然非常有限，但是它们仍然是创建外观一致的应用程序并使代码库保持DRY的基本方面之一。

翻译自: https://www.digitalocean.com/community/tutorials/flutter-themes

flutter 主题