如何在我的整个应用程序上设置相同的主题颜色？ |扑

Question

我想在我的整个应用程序上使用相同的主题颜色

我想要这样的输出

这是我的代码，我在我的登录文件中创建了这个 statelesswidget，并在我设计登录页面的地方传递了 Login (StatefulWidget)。

class MyApp extends StatelessWidget {
  // const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
      primarySwatch: Colors.blue
    ),
    home: Login(),
    );
  }
}

这是我的主文件代码

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    
    home: MyApp(),
  ));
}

任何人请让我知道我哪里做错了。

这是我的输出

Answer 1

像这样更新你的主要功能：

void main() {
  runApp(new MyApp());
}

您不必多次使用 MaterialApp。

这里是工作代码的简单示例：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
      );
    }
}

Answer 2

设置主题的最佳方式是将其作为独立的主题文件并在主文件中调用 theme: ThemeData(), 这样您还可以设置图标的主题，也可以设置文本的主题。

 import 'package:flutter/material.dart';
ThemeData appthemedata(BuildContext context)
{
  return ThemeData(
    primaryColor:appcolor,
    // scaffoldBackgroundColor: Colors.white,
    appBarTheme: AppBarTheme(
        centerTitle: true,
        elevation: 0,
        textTheme: TextTheme(headline1: AppBarTextStyle )
    ),
    textTheme: TextTheme(

      headline1: TitleTextStyle,
      bodyText1:Body1TextStyle,
    ),
    iconTheme: IconThemeData(
      color:Colors.white,
      size: 17,
    ),
  );
}

Answer 3

对于整个应用程序，您可以在 Material 应用程序小部件中设置 textTheme 属性。

MaterialApp(
 theme: ThemeData(
 textTheme: TextTheme(
  bodyText1: TextStyle(),
  bodyText2: TextStyle(),
).apply(
  bodyColor: Colors.orange, 
  displayColor: Colors.blue, 
),
),
)

如何在我的整个应用程序上设置相同的主题颜色？ |扑

How to set same theme color on my entire app? | Flutter

android

themes

flutter