Bases de flutter pour les débutants (Partie VIII)

Flutter est doté de grandes possibilités pour une personnalisation facile de l'interface utilisateur.

Aujourd'hui, nous allons essayer de couvrir les choses les plus importantes qui peuvent vous être utiles en termes de création d'une conception d'application.

L'article ne prétend pas être complet. Il ne contient que les choses les plus importantes.

Commencer!

Notre plan

• Partie 1  - introduction au développement, première annexe, notion d'état ;

  
  
  
  
  

• Partie 2  - fichier pubspec.yaml et utilisation de flutter sur la ligne de commande ;

  
  
  
  
  

• Partie 3  - BottomNavigationBar et Navigator ;

  
  
  
  
  

• Partie 4  - MVC. Nous utiliserons ce modèle particulier comme l'un des plus simples ;

  
  
  
  
  

• Partie 5  - paquet http. Création de la classe Repository, premières demandes, listing des posts ;

  
  
  
  
  

• Partie 6  - travailler avec des formulaires, des zones de texte et créer un article.

  
  
  
  
  

• Partie 7 - travailler avec des images, afficher des images sous forme de grille, recevoir des images du réseau, ajouter les vôtres à l'application;

  
  
  
  
  

• Partie 8 (article actuel) - créer votre propre thème, ajouter des polices et des animations personnalisées ;

  
  
  
  
  

• Partie 9 - un peu sur les tests;

  
  
  
  
  

Ajout de polices personnalisées

Essayons de changer la police de notre application Flutter.

Accédez au site Web de Google Fonts et téléchargez la police Kalam .

Ensuite, créons un dossier fonts



à la racine de notre projet :

Et y mettre nos polices :

Écrivons maintenant la police Kalam



dans le pubspec.yaml



fichier :

#         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/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

N'oubliez pas d'exécuter la pub get



commande.

Nous pouvons maintenant commencer à personnaliser le thème.

Personnalisation du thème de l'application

Si vous avez de l'expérience dans le développement Android natif, vous pouvez probablement me comprendre.

L'un des problèmes les plus importants du développement natif est la prise en charge de plus de 2 thèmes dans l'application.

Peut-être 3 sujets ou plus - ce n'est pas un cas aussi courant que je le pense.

Mais encore, hors de la boîte dans Android, ce n'est pas si facile à faire. Vous devrez vous étendre à partir de composants standard et faire diverses choses (modèle Observer, travailler avec Drawable dans le code).

Heureusement, Flutter n'a pas de tels problèmes.

. 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

  
  
  
  
  

!