前提・実現したいこと
初学者なので質問におかしな点があってもお許しください。HTML/CSSとGoogle
マテリアルデザインコンポーネントを勉強しています。
「progress indicator」を実装できるようになりたいのですが、それについてのGoogleサイトを読んでも実装方法がわかりません。以下のコードが書かれていましたが、HTMLに貼り付けてみてもブラウザはそのコードが文字で書いてあるだけです。
ですから、見たことない記法でもありますし言語が違うのかなと思い質問させていただきました。
もし可能であれば、実装する手順まで教えていただけたら大変ありがたいです。
よろしくお願いします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Progress Indicator Demo',
debugShowCheckedModeBanner: false,
theme: _buildShrineTheme(),
home: Scaffold(
appBar: AppBar(
title: Text('Theme Progress Indicator Demo'),
),
body: Center(
child: Column(
children: [
Divider(),
LinearProgressIndicator(),
CircularProgressIndicator(),
],
),
),
),
);
}
}
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
colorScheme: _shrineColorScheme,
toggleableActiveColor: shrinePink400,
accentColor: shrineBrown900,
primaryColor: shrinePink100,
buttonColor: shrinePink100,
scaffoldBackgroundColor: shrineBackgroundWhite,
cardColor: shrineBackgroundWhite,
textSelectionColor: shrinePink100,
errorColor: shrineErrorRed,
primaryIconTheme: _customIconTheme(base.iconTheme),
textTheme: _buildShrineTextTheme(base.textTheme),
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
iconTheme: _customIconTheme(base.iconTheme),
);
}
IconThemeData _customIconTheme(IconThemeData original) {
return original.copyWith(color: shrineBrown900);
}
TextTheme _buildShrineTextTheme(TextTheme base) {
return base.apply(
fontFamily: 'Rubik',
displayColor: shrineBrown900,
bodyColor: shrineBrown900,
);
}
const ColorScheme _shrineColorScheme = ColorScheme(
primary: shrinePink100,
primaryVariant: shrineBrown900,
secondary: shrinePink50,
secondaryVariant: shrineBrown900,
surface: shrineSurfaceWhite,
background: shrineBackgroundWhite,
error: shrineErrorRed,
onPrimary: shrineBrown900,
onSecondary: shrineBrown900,
onSurface: shrineBrown900,
onBackground: shrineBrown900,
onError: shrineSurfaceWhite,
brightness: Brightness.light,
);
const Color shrinePink50 = Color(0xFFFEEAE6);
const Color shrinePink100 = Color(0xFFFEDBD0);
const Color shrinePink300 = Color(0xFFFBB8AC);
const Color shrinePink400 = Color(0xFFEAA4A4);
const Color shrineBrown900 = Color(0xFF442B2D);
const Color shrineBrown600 = Color(0xFF7D4F52);
const Color shrineErrorRed = Color(0xFFC5032B);
const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
const Color shrineBackgroundWhite = Colors.white;
試したこと
bodyタグの中に上記のコードを貼り付けました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>コンポーネントGoogleMaterialDesign</title> <link rel="stylesheet" href="styles.css"> </head> <body></body>
</html>補足情報(FW/ツールのバージョンなど)
テキストエディタ:Atom
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/20 08:55 編集
2021/03/20 09:04