Flutter实现好物商城_首页

1、首先，创建全局常量类constants，用于设置背景色、默认内边距等。

const kPrimaryColor = Color(0xFF6F35A5);
const kPrimaryLightColor = Color(0xFFF1E6FF);

const double defaultPadding = 16.0;

2、在项目根目录下创建assets文件夹，添加图片。如下图所示：

3、在配置文件添加svg图片插件库：

  flutter_svg: ^1.1.0

4、创建引导页--测试

import 'package:flutter/material.dart';
import 'package:hot_shop/constants.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "好物商城",
      theme: ThemeData(
        primaryColor: kPrimaryColor, //全局主题颜色
        scaffoldBackgroundColor: Colors.white,//页面背景色

        elevatedButtonTheme: ElevatedButtonThemeData(  //全局按钮主题设置
          style: ElevatedButton.styleFrom(
            elevation: 0,
            primary: kPrimaryColor,
            shape: const StadiumBorder(),//体育场形状
            maximumSize: const Size(double.infinity, 56),
            minimumSize: const Size(double.infinity, 56)
          )
        ),

        inputDecorationTheme: const InputDecorationTheme(  //全局输入框主题设置
          filled: true,
          fillColor: kPrimaryLightColor,//背景色
          iconColor: kPrimaryColor,//图标颜色
          prefixIconColor: kPrimaryColor,//前置图标颜色
          contentPadding: EdgeInsets.symmetric(vertical: defaultPadding,horizontal: defaultPadding),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(30)),
            borderSide: BorderSide.none
          )
      )

      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("欢迎页",style: TextStyle(fontSize: 18,fontWeight: FontWeight.w500)),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: TextField(
            onTap: (){},
            decoration: const InputDecoration(
              //icon: Icon(Icons.person),  //输入框之外的图标
              prefixIcon: Icon(Icons.person),//输入框之内的图标
              //labelText: "用户名",  //标签提示
              hintText: "请输入用户名", //隐藏提示
            ),
          ),
        ),
      ),
    );
  }
}