iT邦幫忙

0

Flutter 03

As we mention before, we can set different properties of each widget.

  • Changing Background Colour
    In the example below, we changed the background color of AppBar and Button by setting the backgroundColor to red[600].


If we need different colors, we can press Ctrl+Q, a reference window of more shades will pop out.

  • Changing Font Style
    The text in the Widget can also be mortified.

First, we have to download a font style from Google Fonts.

We choose ‘Bebas Neue’ here. Download the zip files and extract it.

In the Android Studios, we create a new directory in ‘myapp’ project, and name it ‘fonts’.

In the extracted file, drag the ttf. file into the fonts file we just created.
After that, we rewrite the fonts setting in the pubspec.yaml file like the picture below.

We can use the downloaded fonts from now on. In main.dart :

child: Text(
    'Hello Programmers!',
    style: TextStyle(
        fontSize : 30.0,
        fontWeight: FontWeight.bold,
        letterSpacing: 2.0,
        color: Colors.grey[850],
        fontFamily: 'BebasNeue',
    )
  ),

Full code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold( //ROOT WIDGET
    appBar: AppBar(
      title: Text(
          'CodeForces',
          style: TextStyle(
              fontSize: 25.0,
              letterSpacing: 2.0,
              color: Colors.white,
              fontFamily: 'BebasNeue',
          ),
      ), //SET THE TITLE TEXT
      centerTitle: true,    //SET THE PROPERTIES, WHERE THE TEXT SHOWED AT THE CENTRE
      backgroundColor: Colors.red,
    ),
    body: Center( //LOCATED IN THE MIDDLE
      child: Text(
        'Hello Programmers!',
        style: TextStyle(
            fontSize : 30.0,
            fontWeight: FontWeight.bold,
            letterSpacing: 2.0,
            color: Colors.grey[850],
            fontFamily: 'BebasNeue',
        )
      ),
    ),
    floatingActionButton: FloatingActionButton( //CREATE A FLOATING BUTTON
      child: Text('click'),
      backgroundColor: Colors.red[600],
    ),
  ),
));


尚未有邦友留言

立即登入留言