Dasar Flutter untuk Pemula (Bagian VIII)

Flutter diberkahi dengan kemungkinan besar untuk penyesuaian antarmuka pengguna yang mudah.

Hari ini kami akan mencoba membahas hal-hal terpenting yang dapat berguna bagi Anda dalam hal membuat desain aplikasi.

Artikel tidak mengklaim lengkap. Ini hanya berisi hal-hal yang paling penting.

Mulai!

Rencana kita

• Bagian 1  - pengantar pembangunan, lampiran pertama, konsep negara;

  
  
  
  
  

• Bagian 2  - file pubspec.yaml dan menggunakan flutter pada baris perintah;

  
  
  
  
  

• Bagian 3  - BottomNavigationBar dan Navigator;

  
  
  
  
  

• Bagian 4  - MVC. Kami akan menggunakan pola khusus ini sebagai salah satu yang paling sederhana;

  
  
  
  
  

• Bagian 5  - paket http. Pembuatan kelas Repositori, permintaan pertama, daftar posting;

  
  
  
  
  

• Bagian 6  - bekerja dengan formulir, kotak teks dan membuat posting.

  
  
  
  
  

• Bagian 7 - bekerja dengan gambar, menampilkan gambar dalam bentuk kisi, menerima gambar dari jaringan, menambahkan gambar Anda sendiri ke aplikasi;

  
  
  
  
  

• Bagian 8 (artikel saat ini) - membuat tema Anda sendiri, menambahkan font dan animasi khusus;

  
  
  
  
  

• Bagian 9 - sedikit tentang pengujian;

  
  
  
  
  

Menambahkan font khusus

Mari kita coba mengubah font aplikasi Flutter kita.

Buka situs web Google Font dan unduh font Kalam .

Selanjutnya, mari buat folder fonts



di root proyek kita:

Dan letakkan font kami di sana:

Sekarang mari kita tulis font Kalam



di pubspec.yaml



file:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Jangan lupa untuk menjalankan pub get



perintah.

Sekarang kita bisa mulai menyesuaikan tema.

Kustomisasi tema aplikasi

Jika Anda memiliki pengalaman dalam pengembangan Android asli, maka Anda mungkin dapat memahami saya.

Salah satu masalah terpenting dalam pengembangan asli adalah dukungan lebih dari 2 tema dalam aplikasi.

Mungkin 3 atau lebih topik - ini bukan kasus biasa seperti yang saya kira.

Tapi tetap saja, di luar kotak di Android, ini tidak mudah dilakukan. Anda harus memperluas dari komponen standar dan melakukan berbagai hal (pola Pengamat, bekerja dengan Drawable dalam kode).

Untungnya, Flutter tidak memiliki masalah seperti itu.

. 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

  
  
  
  
  

!