本文作为flutter入门实战——flutter的基本布局和使用

问题背景

本文作为flutter入门系列的demo，介绍flutter的基本布局和使用。

问题分析

本文是flutter系列的实战一——实现基本布局和界面，实现效果如下：

问题解决

话不多说，直接上代码。 main.dart文件，代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8), //define
                  child: const Text(
                    'School of Computer Science',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Birmingham, UK',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
    Widget buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton.icon(
          onPressed: () {},
          icon: const Icon(
            //each button has an icon and a text label.
            Icons.phone,
            size: 24.0,
          ),
          label: Text('CONTACT'),
        ),
        ElevatedButton.icon(
          onPressed: () {},
          icon: const Icon(
            Icons.near_me,
            size: 24.0,
          ),
          label: Text('FIND US'),
        ),
        ElevatedButton.icon(
          onPressed: () {},
          icon: const Icon(
            Icons.download,
            size: 24.0,
          ),
          label: Text('GET INFO'),
        ),
      ],
    );
    Widget textSection = const Padding(
      padding: EdgeInsets.all(32),
      child: Text(
        'The University of Birmingham School of Computer Science was ranked 3rd in the 2022 UK REF. '
        'It is research groups specialising in CyberSecurity, Human-Centred Computing,'
        'Artificial Intelligence and Robotics, Computational LifeSciences, '
        'and Computational Theory.',
        softWrap: true,
      ),
    );
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to the School of Computer Science'),
        ),
        body: ListView(
          children: [
            Image.asset('imgs/back1.png',
                width: 150,
                height: 300,
                fit: BoxFit.cover), //make the image as small as possible but to
            titleSection,
            textSection,
            buttonSection,
          ],
        ),
      ),
    );
  }

  Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, color: color),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }
}

对应的widgt tree如下：

问题总结

本文主要介绍了flutter的入门实战demo1——实现基本布局和组件，有兴趣的同学可以进一步深入研究。