【Flutter实战静态页面】--在线点餐app（1）顶端栏

原路指南

【Flutter】在线点餐APP_哔哩哔哩_bilibili

——————

本文章只是一个初学者用来做的学习记录

①有视频教程

②作者发布了源码且有链接

③2022年语法有些改变，无法直接使用源码

④作者前面配置里了pubspec.yam和constants.dart文件

 main.dart

import 'package:flutter/material.dart';
import 'package:foodordering/constants.dart';
import 'package:foodordering/screens/home/home-screen.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Food App',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: kPrimaryColor, //主题颜色
          onPrimary: Colors.white, //主题字体颜色
          //onBackground: Colors.pink,
          //secondary: Colors.amber),
        ),
        textTheme: TextTheme(
          bodyText1: TextStyle(color: kPrimaryColor),
          bodyText2: TextStyle(color: ksecondaryColor),
        ),
      ),
      home: HomeScreen(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:foodordering/constants.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: SvgPicture.asset("assets/icons/menu.svg"),
          onPressed: () {},
        ),
        title: RichText(
          text: TextSpan(
            style: Theme.of(context)
                .textTheme
                .headline6
                ?.copyWith(fontWeight: FontWeight.bold),
            children: const [
              TextSpan(
                text: "Punk",
                style: TextStyle(color: ksecondaryColor),
              ),
              TextSpan(
                text: "Food",
                style: TextStyle(color: kPrimaryColor),
              ),
            ],
          ),
        ),
        actions: [
          IconButton(
            icon: SvgPicture.asset("assets/icons/notification.svg"),
            onPressed: () {},
          ),
        ],
      ),
    );

    //   appBar: homeAppBar(context),
    //   bottomNavigationBar: BottomNavBar(),
    //   body: Body(),
    // );
  }
}