• 移动平台入门 (幻灯片)
  • 什么是Flutter框架
  • Flutter环境、Android SDK & VSCode IDE安装
  • 布局小部件和UI元素

练习1

创建Flutter项目，并介绍Flutter的基本框架

  • StatelessWidget
  • MaterialApp
  • 脚手架

StatelessWidget

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

StatefulWidget

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

练习1：flutter_application_1

练习2

使用Column和Row构建布局，以在应用界面中形成所需的布局排列

flutter layout

  • StatelessWidget
  • MaterialApp
  • 脚手架
  • Column小部件和子部件
  • Row小部件和子部件
  • Container小部件和子部件

练习2：flutter_application_2

练习3

用Text和Image小部件填充Column和Row布局，以创建更具吸引力的应用程序

flutter apps

创建单独的home.dart文件以组织项目结构

  • Column小部件和子部件
  • Row小部件和子部件
  • Container小部件和子部件
    • Center小部件
    • Text小部件
    • Image小部件
    • 依赖项：images
  • Navigator push and pop

double? width
MediaQuery.of(context).size.width

double? height
MediaQuery.of(context).size.height

练习4：flutter_application_3

练习4

创建show.dart文件以显示home.dart中的详细信息

  • 依赖项：fonts
    • fontFamily: 'Bubblegum'
  • Navigator push and pop
    • InkWell小部件
  • 数据模型
  • ListView Builder
  • UI元素ListTile()

自定义小部件：KlikGambarWidget()

class KlikGambarWidget extends StatelessWidget {
  KlikGambarWidget({
    Key? key,
    required this.title,
    required this.nama,
  }) : super(key: key);

  String title;
  String nama;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ShowPage(gambar: nama, title: title)));
      },
      child: Container(
        height: 100,
        width: MediaQuery.of(context).size.width * 0.25,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/$nama'), fit: BoxFit.cover)),
      ),
    );
  }
}

数据模型

class Gambar {
  String gambar;
  String tajuk;

  Gambar({required this.gambar, required this.tajuk});
}

数据列表

List<Gambar> semua = [
  Gambar(gambar: 'avatar/avatar1.png', tajuk: 'Avatar 1'),
  Gambar(gambar: 'avatar/avatar2.png', tajuk: 'Avatar 2'),
  Gambar(gambar: 'avatar/avatar3.png', tajuk: 'Avatar 3'),
  Gambar(gambar: 'avatar/avatar4.png', tajuk: 'Avatar 4'),
  Gambar(gambar: 'avatar/avatar5.png', tajuk: 'Avatar 5'),
];

练习4：flutter_application_4

练习5

构建Drawer()（侧边栏）并将其保存为widgets/menu.dart

  import 'package:flutter/material.dart';
import 'package:flutter_application_4/pages/home.dart';
import 'package:flutter_application_4/pages/list.dart';
import 'package:flutter_application_4/pages/listdata.dart';

class MenuWidget extends StatelessWidget {
  const MenuWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 5.0),
            width: MediaQuery.of(context).size.width,
            height: 80,
            alignment: Alignment.centerRight,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/fruit/fruit_main.jpg'),
                    fit: BoxFit.cover)),
            child: const Text('Fruit App',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    letterSpacing: 3.5,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Bubblegum')),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () {
              //Navigator
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Home()));
            },
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('My Fruit'),
            onTap: () {
              //Navigator
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => ListPage()));
            },
          ),
          ListTile(
            leading: Icon(Icons.batch_prediction),
            title: Text('Fruit Data'),
            onTap: () {
              //Navigator
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ListDataPage()));
            },
          ),
        ],
      ),
    );
  }
}

为LoginPage()生成AppBar操作按钮

  • Form小部件()
  • TextFormField小部件()
  • ElevatedButton小部件()

使用插件https://pub.dev/packages/flutter_launcher_icons更改App启动图标

  flutter_launcher_icons: ^0.9.2  

  flutter_icons:
    android: "launcher_icon"
    ios: true
    image_path: "images/icon/logo.png"

  flutter pub run flutter_launcher_icons:main

在上述配置中，该包设置为替换现有的启动器图标

使用CLI flutter build apk生成apk

练习5：flutter_application_5

参考

GitHub

查看 Github