【腾讯云 Cloud Studio 实战训练营】尝鲜体验Flutter编写一个App应用

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:material_3_demo/btm_navbar.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BtmNavBarPage(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'home_part/home_page.dart';
import 'second_part/second_page.dart';
import 'my_part/my_page.dart';

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

  @override
  State<BtmNavBarPage> createState() => _BtmNavBarPageState();
}

class _BtmNavBarPageState extends State<BtmNavBarPage> {

  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home,color: Colors.grey,),
      activeIcon: Icon(CupertinoIcons.home,color: Colors.pink,),
      label: "首页",
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search,color: Colors.grey,),
      activeIcon: Icon(CupertinoIcons.search,color: Colors.pink,),
      label: "手册",
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled,color: Colors.grey,),
      activeIcon: Icon(CupertinoIcons.profile_circled,color: Colors.pink,),
      label: "我的",
    
    ),
  ];

  final List tabBodies = [
    HomePage(),
    SecondPage(),
    MyPage(),
  ];

  int currentIndex = 0;
  var currentPage;

  @override 
    void initState() {
      super.initState();
      currentPage = tabBodies[currentIndex];
    }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 13,
        unselectedFontSize: 13,
        selectedItemColor: Colors.pink,
        unselectedItemColor: Colors.grey,
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomTabs,
        onTap: (index){
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: Column(
          children: [
            topPart(),
            CenterPart(),
          ],
        ),
      ),
    );
  }

  Widget topPart() {
    return Container(
      child: Image.asset(
        "../assets/cs.png",
        width: MediaQuery.of(context).size.width,
        fit: BoxFit.cover,
      ),
    );
  }

  Widget CenterPart() {
    return Container(
      child: ListView.builder(
          itemCount: 3,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return itemPart(index);
          }),
    );
  }

  Widget itemPart(int index) {
    String strTit = "";
    String strDet = "";
    String strImg = "";

    if (index == 0) {
      strTit = "Cloud Studio 简介";
      strDet =
          "Cloud Studio是CODING自主研发的在线IDE集成开发环境，用户可以通过Cloud Studio创建项目的工作空间，进行在线编程、开发、调试等操作。Cloud Studio还提供可分享的在线IDE开发环境功能。";
      strImg = "../assets/colud_studio.png";
    } else if (index == 1) {
      strTit = "Flutter 简介";
      strDet =
          "Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作，在全世界，Flutter正在被越来越多的开发者和组织使用。";
      strImg = "../assets/flutter.png";
    } else if (index == 2) {
      strTit = "Dart 简介";
      strDet =
          "Dart是一种基于类的可选类型化编程语言，设计用于创建Web应用程序，Google称，Dart的设计目标是为Web编程创造结构化但又富有灵活性的语言。";
      strImg = "../assets/dart.png";
    }

    return Column(
      children: [
        Container(
          child: Row(
            children: [
              Container(
                padding: EdgeInsets.all(10),
                child: Image.asset(
                  "${strImg}",
                  width: 80,
                  height: 80,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 25,
                      child: Text(
                        "${strTit}",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w700),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(right: 10),
                      height: 55,
                      width: MediaQuery.of(context).size.width - 115,
                      child: Text(
                        "${strDet}",
                        style: TextStyle(fontSize: 11, color: Colors.grey),
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(height: 0.5, color: Color.fromARGB(255, 140, 137, 137))
      ],
    );
  }
}

description:
  A Flutter project showcasing supported Material 3 components, typography, color system and elevation.
  Supports different light/dark mode, color seed, and comparison to Material 2.

publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ">=2.17.0-0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.1

flutter:
  uses-material-design: true

  assets:
    - assets/