flutter theme theme style generation tool

original

https://medium.com/@sheikhg1900/using-flutter-theming-tools-generated-dart-material-theme-in-your-application-f190f3919e88

refer to

• https://medium.com/@sheikhg1900/using-flutter-theming-tools-generated-dart-material-theme-in-your-application-f190f3919e88

text

Flutter theme tool application on your android phone. Follow the guide to prepare a great Dart theme for your application.

Copy the generated Dart theme code to the clipboard.

To get the theme on your computer, please in the IDE, _ (for example, Visual Studio Code) . Paste it into the _slack chat on your phone so that you can get the code slack On the mobile device slack , enter \`\`\`. A box will appear. Paste the contents of the clipboard into the box.

Optional: Follow the same steps to generate another Dart theme for dark mode.

Open your existing flutter project. generated_theme.dart file with the following content.

import 'package:flutter/material.dart';ThemeData get mylightTheme {// TODO: Copy Generated Light Theme Here.
return theme;
}ThemeData get myDarkTheme {// TODO: Copy Generated Dark Theme Here.
return theme;
}

Replace the TODO comment with the generated code.

ThemeData get mylightTheme {
// Flutter Theming Tool 1.0.0+10, developed by Tamata Soft
// Initialize ThemeData.
  var theme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  );// Main Setting.
  theme = theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(
      onPrimary: const Color(0xffffffff),
      secondary: Colors.deepOrange,
    ),
  );// ElevatedButton Setting.
  theme = theme.copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0),
              topRight: Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),
  );// OutlinedButton Setting.
  theme = theme.copyWith(
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0),
              topRight: Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),
  );// Chip Setting.
  theme = theme.copyWith(
    chipTheme: theme.chipTheme.copyWith(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.0),
          bottomRight: Radius.circular(16.0),
        ),
      ),
      labelStyle: (theme.chipTheme.labelStyle).copyWith(
        color: Colors.deepOrange,
        shadows: [
          const Shadow(
            blurRadius: 2.0,
            color: Colors.grey,
          )
        ],
      ),
      secondaryLabelStyle: (theme.chipTheme.labelStyle).copyWith(
        shadows: [
          const Shadow(
            blurRadius: 2.0,
          )
        ],
      ),
    ),
  );
  return theme;
}

Open the main.dart file. Add the theme attribute to the MaterialApp

MaterialApp(
 title: 'Flutter Demo',
 theme: mylightTheme,
 ----
 ----
)

required by

google_fonts

---

© Cat brother

• https://ducafecat.tech/
• https://github.com/ducafecat
• WeChat group ducafecat
• b Station https://space.bilibili.com/404904528

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578