Flutter 4.5 - Custom theme, font, image

 1, Custom theme: 

return MaterialApp(
  title: 'Personal Expenses',
  theme: ThemeData(
    primarySwatch: Colors.deepPurple,
    accentColor: Colors.amber
  ),
  home: MyHomePage(),
);

Use:

color: Theme.of(context).primaryColor ,

2, Custom font

- Add fonts vào thư mục assets/fonts

- Khai báo fonts ở pubspec.yaml (Lưu ý: khoảng cách đầu ở  pubspec.yaml rất quan trọng, nếu thò thụt ko đúng sẽ gây ra lỗi hoặc không thể sử dụng đc dependence vừa thêm ko đúng)

- Defind textTheme và appBarTheme ở main.dart

theme: ThemeData(
    primarySwatch: Colors.deepPurple,
    accentColor: Colors.amber,
    fontFamily: 'Quicksand',
    textTheme: ThemeData.light().textTheme.copyWith( 
      headline6: TextStyle(
        fontFamily: 'OpenSans',
        fontSize: 18,
      ),
    ),
    appBarTheme: AppBarTheme(
      textTheme: ThemeData.light().textTheme.copyWith(  
            headline6: TextStyle(
              fontFamily: 'OpenSans',
              fontSize: 20,
            ),
          ),
    )),

Sử dụng textTheme : 

Text(
  transaction[index].title,
  style: Theme.of(context).textTheme.headline6,
),

3, Image:

- Add image vào foder iamges

- Khai báo iamge ở pubspec.yaml 

- Sử dụng: để Image ở trong Container để có thể set height, width,...

Container(
    height: 200,
    child: Image.asset(
      'assets/images/waiting.png',
      fit: BoxFit.cover,
    )),

*SizeBox: Có thể dùng SizeBox để tạo 1 khoảng trống như margin. Như ví dụ dưới, SizeBox tạo ra 1 khoảng trắng giữa Text và Container có height là 10.

Column(
    children: <Widget>[
      Text(
        'Bạn chưa có giao dịch nào !',
        style: Theme.of(context).textTheme.headline6,
      ),
      SizedBox(
        height: 10,
      ),
      Container(
          height: 200,
          child: Image.asset(
            'assets/images/waiting.png',
            fit: BoxFit.cover,
          )),
    ],
  )