图片自适应

README.md

@@ -31,4 +31,8 @@ samples, guidance on mobile development, and a full API reference.
 - 将无状态组件转成有状态组件，信息变化
 - 使用future.delayed实现倒计时，注意使用async
 - 使用三目运算符控制显示
-- 将相同组件抽出
+- 将相同组件抽出
+## 图片自适应
+- 在main中使用theme设置全局样式
+- 在padding中使用edgeinsets.symmetric设置水平间距
+- image中，使用fit Boxfit来设置宽高适配

assets/images/files.txt

@@ -1 +1,2 @@
-static const logo_3xPng = 'assets/images/logo@3x.png';
+static const logoPng = 'assets/images/logo.png';
+static const welcomePng = 'assets/images/welcome.png';

lib/common/assets.dart

@@ -1,4 +1,4 @@
-class AssetsImages{
-  static const logopang = 'assets/images/logo@3x.png';
+class AssetsImages {
+  static const logoPng = 'assets/images/logo.png';
+  static const welcomePng = 'assets/images/welcome.png';
 }
-

lib/main.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import 'pages/splash.dart';
+import 'pages/welcome.dart';
 
 void main() {
   runApp(const MyApp());
@@ -11,9 +11,12 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
-      home: SplashPage(),
+    return MaterialApp(
+      home: const WelcomePage(),
       debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        fontFamily: 'Poppins',
+      ),
     );
   }
 }

lib/pages/splash.dart

@@ -57,7 +57,7 @@ class _SplashPageState extends State<SplashPage> {
 
         //上层图片
         Image.asset(
-          AssetsImages.logopang,
+          AssetsImages.logoPng,
           width: 84,
           height: 80,
         )
@@ -71,7 +71,7 @@ class _SplashPageState extends State<SplashPage> {
       text,
       style: const TextStyle(
         fontSize: 19,
-        fontFamily: 'Poppins',
+        // fontFamily: 'Poppins',
         fontWeight: FontWeight.bold,
         color: Colors.white,
         height: 22 / 19,

lib/pages/welcome.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+import '../common/assets.dart';
+
+class WelcomePage extends StatelessWidget {
+  const WelcomePage({Key? key}) : super(key: key);
+
+  Padding _bulidText() {
+    return const Padding(
+      padding: EdgeInsets.symmetric(horizontal: 38),
+      child: Text(
+        'Browse & Oder All Products at Any Time',
+        style: TextStyle(
+          fontSize: 20,
+          fontWeight: FontWeight.bold,
+          color: Color(0xff2B2A2A),
+          height: 23 / 20,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildView() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        //标题
+        _bulidText(),
+
+        const SizedBox(
+          height: 70,
+        ),
+
+        //图片
+        Image.asset(AssetsImages.welcomePng,
+            height: 300,
+            //宽撑满
+            width: double.infinity,
+
+            fit: BoxFit.fitWidth),
+
+        //按钮组
+        Container(),
+
+        //end
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(child: _buildView()),
+    );
+  }
+}