Flutter实现好物商城_首页

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

<code>const kPrimaryColor = Color(0xFF6F35A5);
const kPrimaryLightColor = Color(0xFFF1E6FF);

const double defaultPadding = 16.0;</code>

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

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

<code>  flutter_svg: ^1.1.0</code>

4、创建引导页--测试

<code>import &#039;package:flutter/material.dart&#039;;
import &#039;package:hot_shop/constants.dart&#039;;

main()=&gt;runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: &quot;好物商城&quot;,
      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&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(&quot;欢迎页&quot;,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: &quot;用户名&quot;,  //标签提示
              hintText: &quot;请输入用户名&quot;, //隐藏提示
            ),
          ),
        ),
      ),
    );
  }
}</code>