Flutter 创建一个简单的app

本文介绍了如何使用Flutter创建一个简单的Android应用。首先,简述了Flutter的环境配置和Dart语言的基础。接着,详细讲解了Flutter应用的入口点,将其比喻为Android开发中的Application,并展示了应用的基本运行效果。
摘要由CSDN通过智能技术生成

Flutter 创建一个简单的APP

环境

对于flutter的环境,基本上大家都完成了吧,如果没有,请看这篇文章

基于Flutter的Android开发

创建app

其实啊,再用flutter之前是不是得了解一下dart语言,dart语言和Java其实大同小异,dart语言在运行的时候,就是在main()中运行的,flutter其实就是基于dart语言开发的,所以flutter运行整个项目也是在main()方法中运行的。

1、入口

	project->lib->main.dart中就有`main()`方法。
void main() {
  runApp(new App());  //  这里的runApp() 就是整个项目的入口, 
}

这一块就好比Android开发中每个项目的Application。

而这里的new App() 是什么呢?

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(  /// 这就是一个页面的创建 
     
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单Flutter向导页面的demo,主要使用了PageView和Stepper组件。 ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: WizardPage(), ); } } class WizardPage extends StatefulWidget { @override _WizardPageState createState() => _WizardPageState(); } class _WizardPageState extends State<WizardPage> { int _currentStep = 0; PageController _pageController = PageController(); List<Step> _steps = [ Step( title: Text('Step 1'), content: Center( child: Text('This is step 1'), ), ), Step( title: Text('Step 2'), content: Center( child: Text('This is step 2'), ), ), Step( title: Text('Step 3'), content: Center( child: Text('This is step 3'), ), ), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Wizard Page'), ), body: PageView.builder( controller: _pageController, itemCount: _steps.length, itemBuilder: (BuildContext context, int index) { return _steps[index].content; }, onPageChanged: (int index) { setState(() { _currentStep = index; }); }, ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ FlatButton( onPressed: _currentStep == 0 ? null : () { setState(() { _pageController.previousPage( duration: Duration(milliseconds: 250), curve: Curves.easeInOut); }); }, child: Text('Back'), ), Stepper( steps: _steps, currentStep: _currentStep, onStepTapped: (int index) { setState(() { _pageController.jumpToPage(index); _currentStep = index; }); }, controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) { return Row( children: <Widget>[ FlatButton( onPressed: onStepCancel, child: Text('Cancel'), ), FlatButton( onPressed: onStepContinue, child: Text(_currentStep == _steps.length - 1 ? 'Finish' : 'Next'), ), ], ); }, ), ], ), ), ); } } ``` 该demo中使用了PageView来呈现不同的步骤内容。在底部,使用了Stepper来显示当前步骤和导航到其他步骤。在点击下一步或完成时,可以使用PageController来滑动到下一步或完成向导。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值