Flutter首页框架搭建

已于 2024-01-16 09:34:28 修改
阅读量573 收藏 10
点赞数 8
分类专栏： Flutter 文章标签： flutter
于 2024-01-16 09:33:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dallasnash/article/details/135616111
版权
本文介绍了如何在Android上使用Flutter进行项目开发，包括下载并安装Flutter，配置环境变量，以及在AndroidStudio中新建项目、创建导航器模块和页面文件。主要内容涉及主文件main.dart的修改和初步的程序运行效果。
摘要由CSDN通过智能技术生成

1.下载flutter

2. 安装android

3.配置环境变量

关于环境搭建部分，哪天写一下，日志杂乱无章。

打开android studio 新建项目，选择flutter

新建文件夹创建 navigator和pages

文件夹下分别创建文件，tab_navigator.dart，home_page.dart,my_page.dart,search_page.dart,travel_page.dart

tab_navigator.dart，内容如下

home_page.dart,my_page.dart,search_page.dart,travel_page.dart 内容：

main.dart文件内容修改

程序运行效果：

土井塔克树1412
关注
专栏目录
flutter offset_用Flutter实现58App的首页
weixin_39891694的博客
11-29 482
背景Flutter作为全新跨平台应用框架，在页面渲染和MD开发上优势明显，可谓是业界一枝独秀。正好最近有这样的一个机会学习Flutter开发，我们便尝试用它开发一个MD风格的较复杂页面，来比较跟原生应用开发的优势。也是想通过对新框架的学习探索，找到适合自身应用的框架。页面展示首页是整个应用里边交互最为复杂的一个页面了，它集合了各种滑动方式，包括：纵向滑动、横向滑动、嵌套滑动；同时，也集合...
_Flutter入门与实战（三）：构建一个常用的页面框架
Android062002的博客
06-22 484
一.Android中高级面试题 1、Activity生命周期？ onCreate() -> onStart() -> onResume() -> onPause() -> onStop() -> onDetroy() 2、Service生命周期？ service 启动方式有两种，一种是通过startService()方式进行启动，另一种是通过bindService()方式进行启动。不同的启动方式他们的生命周期是不一样. 通过startService()这种方式启动的servic
flutter实现首页
villa_mou的博客
12-20 4972
首先了解几个widget SliverAppBar Flutter中的Slivers大家族基本都是配合CustomScrollView来实现的，除了上面提到的滑动布局嵌套，你还可以使用Slivers来实现页面头部展开/收起、 AppBar随手势变换等等功能。 给SliverAppBar设置flexibleSpace(展开后的内容)和expandedHeight(展开高度)属性，就可以轻松完成App...
Flutter练习：实现简单的首页
weixin_44486516的博客
03-09 2557
先贴上展示效果图 说明：这个首页包含了一个轮播图(Swipe)、导航栏(GridView)、广告位(这里是用的一张本地图片作演示)以及下面的tab和列表。 整个页面的代码大体如下图所示： ...
Flutter实现APP首页框架搭建
yangxiaoxi09的博客
10-17 284
Scaffold是一个实现了基本的的布局结构。Key key,this.body,...顶部导航@override),),),),),@override],),),底部导航菜单@override@override@override),});},items: [),),'首页',= 0?),),),),'搜索',= 1?)),),),'旅拍',= 2?)),),),'我的',
flutter玩安卓APP系列文章（一）：首页功能实现
Android开发之旅
06-11 916
首页功能 首页模块分为上下两个部分，上半部分为滚动的banner，下半部分为文章列表，下面就来看下各个部分是如何实现的。 github项目地址 欢迎star Banner 首页需要引入banner插件，大家所需要的插件可以到 https://pub.dev 中查找。 我们在这里引入 flutter_swiper 插件。siwiper支持多种布局，无限轮播，Android和iOS双端适配。 下面看下...
Flutter应用框架搭建(四) 网络请求封装
01-27
Flutter应用框架搭建(四) 网络请求封装
flutter 搭建项目架构
01-12
在本文中，我们将深入探讨如何使用Flutter框架搭建一个完整的项目架构，特别关注如何利用GetX库来实现高效的状态管理和界面更新。Flutter作为一个跨平台的移动应用开发框架，因其丰富的组件库和高性能特性而受到...
flutter 搭建首页框架 Scaffold 与 PageView 实现
11-17
本文将深入讲解这两个组件的功能、用法以及如何结合它们来搭建一个首页框架。 首先，`Scaffold` 是 Flutter 中的一个基本布局组件，它提供了应用程序的结构框架。这个框架通常包括一个顶部的 `AppBar`（导航栏）、...
Flutter 路由替换（返回到根）
10-06
返回到首页有两种方式：替换路由和清除路由 替换路由：替换当前页为目标页（也就是说，堆栈中只有首页和当前页 两个页面，当前页返回自然是首页）。使用以下语句完成替换跳转。 清除路由：此方法完成两个动作：1、清除所有路由；2、跳转路由
flutter学习，基础框架搭建
06-27
本教程将引导你进行Flutter的基础框架搭建，帮助你开启自学Flutter的旅程。 首先，你需要在你的计算机上安装Flutter SDK。你可以从Flutter官网（https://flutter.dev/docs/get-started/install）下载适合你操作系统...
flutter后台管理框架
06-02
Flutter 后台管理框架是一款基于谷歌的 Flutter 技术构建的高效、易用的后台管理系统开发框架。这个框架的主要目标是让开发者能够更专注于业务逻辑的实现，而不是基础架构的搭建，从而提升开发效率，缩短项目周期。...
Flutter开发(十七)：Flutter首页导航的框架
wuqingsen1的博客
11-01 627
首页框架搭建，类似于上一节的，底部导航，不过是规范了写法，效果图如下： 首先创建了五个 dart 文件：tab_navigator.dart (总页面) 、home_page.dart (首页) 、my_page.dart (我的) 、search_page.dart (搜索)和 travel_page.dart(发现)。项目结构如下图： tab_navigator.dart 的代码： import 'package:flutter/material.dart'; import 'packa
Flutter学习笔记6 (模仿链家首页)
Unplugged
07-30 1434
用半小时时间模仿链家首页做了一个UI，代码也就200行左右，非常高效。 编写思路很简单： 主要是两个部分: 首先第一部分是下面的NavigationBar。 第二部分是页面，页面内容： 第1段是一个背景图片。 第2段是10个按钮，由图标和名字组成，一共两行。 第3段是一行，包含一个图片和一列文字。 第4段是4张卡片。 运行效果图： 8Plus:  ...
Flutter如何优雅的实现闲鱼首页底部导航栏
developer_laoliu的博客
05-20 798
先实现一个没有做任何特殊处理的导航栏@override});@overrideheight: 50, // 导航栏高50`],),60 : 40, // 特殊按钮高度60，其余4060 : 40,),icon,),),我们来看一下效果可以看到我们虽然给中间的特殊按钮设置高度60，但是由于整个容器的高度是50，所以中间的按钮被缩小到50了那么怎么让中间这个按钮突破50的限制呢？
Flutter女装商城实战(含源码)
04-04
课程目标本课程以实战案例的方式带领大家如何编写一个复杂的App。课程简介Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的用户界面。本课程以实战案例的方式带领大家编写Flutter女装商城案例。案例中使用了真实的开发接口，采用工程化开发标准开发。
Flutter 从入门实践到开发一个APP之UI基础篇
07-26
本课程详细讲解 Flutter 中涉及到的视图组件，通过这门课程的学习使得大家能掌握使用 Flutter 来编写跨平台移动客户端应用中的基本布局视图。 本课程涉及到： * flutter 中 MaterialApp 使用精讲* flutter 中 Scaffold 使用精讲* flutter 中 Text 使用精讲* flutter 中 TextField 使用精讲* flutter 中 button 使用精讲* flutter 中 Row 使用精讲* flutter 中 Column 使用精讲* flutter 中 Container 使用精讲* flutter 中 Stack 使用精讲* flutter 中 Image 使用精讲* flutter 中 Checkbox 使用精讲* flutter 中 Switch 使用精讲* flutter 中 Radio 使用精讲* flutter 中 InkWell 使用精讲* flutter 中 CustomScrollView 使用精讲* flutter 中 ListView 使用精讲* flutter 中 GridView 使用精讲
Flutter Web首次加载时添加动画
最新发布
nonagontech的博客
09-14 297
Flutter Web首次加载时添加动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值