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: "请输入用户名", //隐藏提示
),
),
),
),
);
}
}
文章评论