mirror of
https://github.com/flutter/samples.git
synced 2026-03-28 07:11:50 +00:00
[linting_tool] Add Adaptive Layout with Theming (#852)
This commit is contained in:
Abdullah Deshmukh
committed by
GitHub
GitHub
parent
35f1670098
commit
8e73c73f4b
208
experimental/linting_tool/lib/theme/app_theme.dart
Normal file
208
experimental/linting_tool/lib/theme/app_theme.dart
Normal file
@@ -0,0 +1,208 @@
|
||||
// Copyright 2021 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:linting_tool/theme/colors.dart';
|
||||
|
||||
class AppTheme {
|
||||
static ThemeData buildReplyLightTheme(BuildContext context) {
|
||||
final base = ThemeData.light();
|
||||
return base.copyWith(
|
||||
bottomAppBarColor: AppColors.blue700,
|
||||
bottomSheetTheme: BottomSheetThemeData(
|
||||
backgroundColor: AppColors.blue700,
|
||||
modalBackgroundColor: Colors.white.withOpacity(0.7),
|
||||
),
|
||||
navigationRailTheme: NavigationRailThemeData(
|
||||
backgroundColor: AppColors.blue700,
|
||||
selectedIconTheme: const IconThemeData(color: AppColors.orange500),
|
||||
selectedLabelTextStyle:
|
||||
GoogleFonts.workSansTextTheme().headline5!.copyWith(
|
||||
color: AppColors.orange500,
|
||||
),
|
||||
unselectedIconTheme: const IconThemeData(color: AppColors.blue200),
|
||||
unselectedLabelTextStyle:
|
||||
GoogleFonts.workSansTextTheme().headline5!.copyWith(
|
||||
color: AppColors.blue200,
|
||||
),
|
||||
),
|
||||
canvasColor: AppColors.white50,
|
||||
cardColor: AppColors.white50,
|
||||
chipTheme: _buildChipTheme(
|
||||
AppColors.blue700,
|
||||
AppColors.lightChipBackground,
|
||||
Brightness.light,
|
||||
),
|
||||
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blueGrey),
|
||||
textTheme: _buildReplyLightTextTheme(base.textTheme),
|
||||
scaffoldBackgroundColor: AppColors.blue50,
|
||||
);
|
||||
}
|
||||
|
||||
static ThemeData buildReplyDarkTheme(BuildContext context) {
|
||||
final base = ThemeData.dark();
|
||||
return base.copyWith(
|
||||
bottomAppBarColor: AppColors.darkBottomAppBarBackground,
|
||||
bottomSheetTheme: BottomSheetThemeData(
|
||||
backgroundColor: AppColors.darkDrawerBackground,
|
||||
modalBackgroundColor: Colors.black.withOpacity(0.7),
|
||||
),
|
||||
navigationRailTheme: NavigationRailThemeData(
|
||||
backgroundColor: AppColors.darkBottomAppBarBackground,
|
||||
selectedIconTheme: const IconThemeData(color: AppColors.orange300),
|
||||
selectedLabelTextStyle:
|
||||
GoogleFonts.workSansTextTheme().headline5!.copyWith(
|
||||
color: AppColors.orange300,
|
||||
),
|
||||
unselectedIconTheme: const IconThemeData(color: AppColors.greyLabel),
|
||||
unselectedLabelTextStyle:
|
||||
GoogleFonts.workSansTextTheme().headline5!.copyWith(
|
||||
color: AppColors.greyLabel,
|
||||
),
|
||||
),
|
||||
canvasColor: AppColors.black900,
|
||||
cardColor: AppColors.darkCardBackground,
|
||||
chipTheme: _buildChipTheme(
|
||||
AppColors.blue200,
|
||||
AppColors.darkChipBackground,
|
||||
Brightness.dark,
|
||||
),
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: AppColors.blue200,
|
||||
primaryVariant: AppColors.blue300,
|
||||
secondary: AppColors.orange300,
|
||||
secondaryVariant: AppColors.orange300,
|
||||
surface: AppColors.black800,
|
||||
error: AppColors.red200,
|
||||
onPrimary: AppColors.black900,
|
||||
onSecondary: AppColors.black900,
|
||||
onBackground: AppColors.white50,
|
||||
onSurface: AppColors.white50,
|
||||
onError: AppColors.black900,
|
||||
background: AppColors.black900Alpha087,
|
||||
),
|
||||
textTheme: _buildReplyDarkTextTheme(base.textTheme),
|
||||
scaffoldBackgroundColor: AppColors.black900,
|
||||
);
|
||||
}
|
||||
|
||||
static ChipThemeData _buildChipTheme(
|
||||
Color primaryColor,
|
||||
Color chipBackground,
|
||||
Brightness brightness,
|
||||
) {
|
||||
return ChipThemeData(
|
||||
backgroundColor: primaryColor.withOpacity(0.12),
|
||||
disabledColor: primaryColor.withOpacity(0.87),
|
||||
selectedColor: primaryColor.withOpacity(0.05),
|
||||
secondarySelectedColor: chipBackground,
|
||||
padding: const EdgeInsets.all(4),
|
||||
shape: const StadiumBorder(),
|
||||
labelStyle: GoogleFonts.workSansTextTheme().bodyText2!.copyWith(
|
||||
color: brightness == Brightness.dark
|
||||
? AppColors.white50
|
||||
: AppColors.black900,
|
||||
),
|
||||
secondaryLabelStyle: GoogleFonts.workSansTextTheme().bodyText2!,
|
||||
brightness: brightness,
|
||||
);
|
||||
}
|
||||
|
||||
static TextTheme _buildReplyLightTextTheme(TextTheme base) {
|
||||
return base.copyWith(
|
||||
headline4: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 34,
|
||||
letterSpacing: 0.4,
|
||||
height: 0.9,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
headline5: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 24,
|
||||
letterSpacing: 0.27,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
headline6: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 20,
|
||||
letterSpacing: 0.18,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
subtitle2: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
letterSpacing: -0.04,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
bodyText1: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18,
|
||||
letterSpacing: 0.2,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
bodyText2: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 14,
|
||||
letterSpacing: -0.05,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
caption: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
color: AppColors.black900,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
static TextTheme _buildReplyDarkTextTheme(TextTheme base) {
|
||||
return base.copyWith(
|
||||
headline4: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 34,
|
||||
letterSpacing: 0.4,
|
||||
height: 0.9,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
headline5: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 24,
|
||||
letterSpacing: 0.27,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
headline6: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 20,
|
||||
letterSpacing: 0.18,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
subtitle2: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
letterSpacing: -0.04,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
bodyText1: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 18,
|
||||
letterSpacing: 0.2,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
bodyText2: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 14,
|
||||
letterSpacing: -0.05,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
caption: GoogleFonts.workSans(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
color: AppColors.white50,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
42
experimental/linting_tool/lib/theme/colors.dart
Normal file
42
experimental/linting_tool/lib/theme/colors.dart
Normal file
@@ -0,0 +1,42 @@
|
||||
// Copyright 2021 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppColors {
|
||||
static const Color white50 = Color(0xFFFFFFFF);
|
||||
|
||||
static const Color black800 = Color(0xFF121212);
|
||||
static const Color black900 = Color(0xFF000000);
|
||||
|
||||
static const Color blue50 = Color(0xFFEEF0F2);
|
||||
static const Color blue100 = Color(0xFFD2DBE0);
|
||||
static const Color blue200 = Color(0xFFADBBC4);
|
||||
static const Color blue300 = Color(0xFF8CA2AE);
|
||||
static const Color blue600 = Color(0xFF4A6572);
|
||||
static const Color blue700 = Color(0xFF344955);
|
||||
static const Color blue800 = Color(0xFF232F34);
|
||||
|
||||
static const Color orange300 = Color(0xFFFBD790);
|
||||
static const Color orange400 = Color(0xFFF9BE64);
|
||||
static const Color orange500 = Color(0xFFF9AA33);
|
||||
|
||||
static const Color red200 = Color(0xFFCF7779);
|
||||
static const Color red400 = Color(0xFFFF4C5D);
|
||||
|
||||
static const Color white50Alpha060 = Color(0x99FFFFFF);
|
||||
|
||||
static const Color blue50Alpha060 = Color(0x99EEF0F2);
|
||||
|
||||
static const Color black900Alpha020 = Color(0x33000000);
|
||||
static const Color black900Alpha087 = Color(0xDE000000);
|
||||
static const Color black900Alpha060 = Color(0x99000000);
|
||||
|
||||
static const Color greyLabel = Color(0xFFAEAEAE);
|
||||
static const Color darkBottomAppBarBackground = Color(0xFF2D2D2D);
|
||||
static const Color darkDrawerBackground = Color(0xFF353535);
|
||||
static const Color darkCardBackground = Color(0xFF1E1E1E);
|
||||
static const Color darkChipBackground = Color(0xFF2A2A2A);
|
||||
static const Color lightChipBackground = Color(0xFFE5E5E5);
|
||||
}
|
||||
Reference in New Issue
Block a user