Clever Geek Handbook

初心者のためのフラッターの基本（パートVIII）

Flutterには、ユーザーインターフェイスを簡単にカスタマイズできる大きな可能性があります。





今日は、アプリケーション設計の作成に関してあなたに役立つ可能性のある最も重要なことをカバーしようとします。





記事は完全であるとは主張していません。最も重要なものだけが含まれています。





ベギン！





私たちの計画

  • パート1- 開発の概要、最初の付録、状態の概念。





  • パート2  -pubspec.yamlファイルとコマンドラインでのflutterの使用。





  • パート3  -BottomNavigationBarとナビゲーター;





  • パート4  -MVC。この特定のパターンを最も単純なものの1つとして使用します。





  • パート5  -httpパッケージ。リポジトリクラスの作成、最初のリクエスト、投稿のリスト。





  • パート6- フォーム、テキストボックスの操作、および投稿の作成。





  • パート7-画像の操作、グリッド形式での画像の表示、ネットワークからの画像の受信、アプリケーションへの独自の画像の追加。





  • パート8（現在の記事）-独自のテーマを作成し、カスタムフォントとアニメーションを追加します。





  • パート9-テストについて少し。





カスタムフォントの追加

Flutterアプリケーションのフォントを変更してみましょう。





Google FontsのWebサイトにアクセスして、Kalamフォントをダウンロードします。





次に、fonts



プロジェクトのルートにフォルダーを作成しましょう。





そして、そこにフォントを配置します。





それではKalam



、pubspec.yaml



ファイルにフォントを書いてみましょう。





#         assets 
flutter:

  # ,    MaterialApp   
  #   Material Design
  uses-material-design: true


  #   
  fonts:
    #   
    - family: Kalam
      fonts:
        #       
        #  
        - asset: fonts/Kalam-Regular.ttf
          style: normal
        - asset: fonts/Kalam-Bold.ttf
          weight: 700
          style: normal
        - asset: fonts/Kalam-Light.ttf
          style: normal
          weight: 300

  #   images
  # /   ,    
  #       images
  assets:
    - images/

pub get



コマンドを実行することを忘れないでください。





これで、テーマのカスタマイズを開始できます。





アプリケーションテーマのカスタマイズ

ネイティブAndroid開発の経験があれば、おそらく私を理解できます。





ネイティブ開発で最も重要な問題の1つは、アプリケーションで2つ以上のテーマをサポートすることです。





おそらく3つ以上のトピック-これは私が思うほど一般的なケースではありません。





しかし、それでも、Androidの箱から出して、これを行うのはそれほど簡単ではありません。標準コンポーネントから拡張して、さまざまなことを行う必要があります（Observerパターン、コードでDrawableを操作する）。





幸い、Flutterにはそのような問題はありません。





. resources,



theme.dart



:





import 'package:flutter/material.dart';

//   
final usualTheme = ThemeData(
  //  primaryColor   
  primaryColor: Colors.purple[600],
  primaryColorLight: Colors.purple[300],
  primaryColorDark: Colors.purple[800],
  //   accentColor
  accentColor: Colors.teal,
  //  Theme  AppBar
  appBarTheme: AppBarTheme(
    shadowColor: Colors.grey.withOpacity(0.8),
    elevation: 10,
  ),
  //  Theme  Text
  textTheme: TextTheme(
    headline5: TextStyle(fontWeight: FontWeight.bold)
  ),
  //      
  fontFamily: "Kalam"
);

primaryColor



accentColor



Material Design.





main.dart



:





class MyApp extends StatelessWidget {

  //  build     
  @override
  Widget build(BuildContext context) {
    //  MaterialApp -   , 
    //     
    // Material Design  .
    return MaterialApp(
      //  
      //  ,    
      title: 'Json Placeholder App',
      //  
      debugShowCheckedModeBanner: false,
      //     
      theme: usualTheme,
      //      
      home: HomePage(),
    );
  }
}

.





!





, .





:)





, Flutter UI .





:





  • Use a custom font





  • The Color system (Material Design)





  • Github





!







More articles:


All Articles