Flutter For Web配合Nginx搭建一个简单的网页

13 篇文章 0 订阅
8 篇文章 0 订阅

Ubuntu上部署的项目多了,想弄个entrance一起管理一下。

先看下最终效果:

1.开启flutter的web模式

//只有master和develop等分支支持flutter web,stable是不行的。

flutter channel master

//开启支持web模式

flutter config --enable-web true

flutter devices

可以看到新增了chrome

//创建一个新web项目

flutter create .

flutter run -d chrome就可以在浏览器中看到效果了。整体而言还是很简单的。

我们可以简单地修改一下界面。

            FlatButton(
                onPressed: () {
                  launch(url["jenkins"]);
                },
                child: Tooltip(
                  message: url["jenkins"],
                  child: Text(
                    "Go to Jenkins",
                    style: TextStyle(fontSize: 24),
                  ),
                )),
            FlatButton(
                onPressed: () {
                  launch(url["nexus"]);
                },
                child: Tooltip(
                  message: url["nexus"],
                  child: Text("Go to Nexus maven center",
                      style: TextStyle(fontSize: 24)),
                )),
            FlatButton(
                onPressed: () {
                  launch(url["http"]);
                },
                child: Tooltip(
                    message: url["http"],
                    child: Text("Go to http server",
                        style: TextStyle(fontSize: 24)))),
          ],

增加三个按钮。这里用到了跳转页面,需要用到url_launcher库里的launch方法,这个库是支持web的。

flutter build web

就可以看到web目录里生产了dart转换成js的代码。

如果有Python只需要

python -m SimpleHTTPServer 8000

就可以启动一个httpserver了,但是我想

1.转到80端口,不需要输入端口号

2.不想每次都手动来启动

3.Python httpserver在当前路径,我想指定路径

之前有配Nginx

1.把生成的web文件放在配置好的目录

2.到nginx的配置文件目录,/etc/nginx/sites-enabled/,把默认的删掉

3.到/etc/nginx/nginx.conf中建一个Http server

4.在sites-available中新建一个文件,eg: node

把80端口的请求forward到82端口的http服务。没有直接把httpserver服务配在80上是为了方便以后导到其它端口上的服务。

5.systemctl restart nginx

重新访问一下localhost就可以默认指向我们配好的服务了。

 

 

 

以下是使用Flutter搭建计算器的步骤: 1. 创建一个新的Flutter项目并命名为calculator。 2. 在lib目录下创建一个名为calculator.dart的文件,并将其作为应用程序的入口文件。 3. 在calculator.dart中导入所需的库: ``` import 'package:flutter/material.dart'; ``` 4. 创建一个新的StatefulWidget类,名为Calculator。 ``` class Calculator extends StatefulWidget { @override _CalculatorState createState() => _CalculatorState(); } ``` 5. 创建一个新的State类,名为_CalculatorState,并在其中实现UI。 ``` class _CalculatorState extends State<Calculator> { String _output = "0"; String _outputHistory = ""; double num1 = 0.0; double num2 = 0.0; String operand = ""; buttonPressed(String buttonText) { if (buttonText == "CLEAR") { _outputHistory = ""; _output = "0"; num1 = 0.0; num2 = 0.0; operand = ""; } else if (buttonText == "+" || buttonText == "-" || buttonText == "x" || buttonText == "/") { num1 = double.parse(_output); operand = buttonText; _output = "0"; } else if (buttonText == ".") { if (_output.contains(".")) { print("Already contains a decimal"); return; } else { _output = _output + buttonText; } } else if (buttonText == "=") { num2 = double.parse(_output); if (operand == "+") { _output = (num1 + num2).toString(); } if (operand == "-") { _output = (num1 - num2).toString(); } if (operand == "x") { _output = (num1 * num2).toString(); } if (operand == "/") { _output = (num1 / num2).toString(); } num1 = 0.0; num2 = 0.0; operand = ""; } else { _output = _output + buttonText; } setState(() { _output = double.parse(_output).toStringAsFixed(2); }); } Widget buildButton(String buttonText) { return new Expanded( child: new OutlineButton( padding: new EdgeInsets.all(24.0), child: new Text( buttonText, style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold), ), onPressed: () => buttonPressed(buttonText), ), ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Calculator"), ), body: new Container( child: new Column( children: <Widget>[ new Container( alignment: Alignment.centerRight, padding: new EdgeInsets.symmetric( vertical: 24.0, horizontal: 12.0, ), child: new Text( _outputHistory, style: new TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, ), ), ), new Container( alignment: Alignment.centerRight, padding: new EdgeInsets.symmetric( vertical: 24.0, horizontal: 12.0, ), child: new Text( _output, style: new TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, ), ), ), new Expanded( child: new Divider(), ), new Column( children: <Widget>[ new Row( children: [ buildButton("7"), buildButton("8"), buildButton("9"), buildButton("/") ], ), new Row( children: [ buildButton("4"), buildButton("5"), buildButton("6"), buildButton("x") ], ), new Row( children: [ buildButton("1"), buildButton("2"), buildButton("3"), buildButton("-") ], ), new Row( children: [ buildButton("."), buildButton("0"), buildButton("00"), buildButton("+") ], ), new Row( children: [ buildButton("CLEAR"), buildButton("="), ], ), ], ) ], ), ), ); } } ``` 在上述代码中,我们定义了一个_CalculatorState类,其中包含了一个字符串变量_output,用于存储计算器的输出结果,以及其他变量,用于存储计算器的状态。我们还定义了一个buttonPressed函数,该函数用于处理按下的按钮并更新输出结果。在buildButton函数中,我们创建了一个新的按钮,并将其与buttonPressed函数关联起来。 6. 在Calculator类中,创建一个build函数,用于返回一个MaterialApp并将其包装在Calculator Widget中。 ``` class Calculator extends StatefulWidget { @override _CalculatorState createState() => _CalculatorState(); } class CalculatorApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Calculator', home: Calculator(), ); } } void main() => runApp(CalculatorApp()); ``` 7. 运行应用程序并测试计算器。 完成上述步骤后,您应该能够成功创建一个基本的Flutter计算器应用程序。您可以根据需要对其进行扩展并添加更多的功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值