Flutter for web 开发从零到踩坑04---尝试修改

上篇文章
Flutter for web 开发从零到踩坑03---项目文件目录讲解
给大家介绍了Flutter项目工程的目录结构，接下来废话不说，我们来尝试修改一下项目中的默认代码。

我们先复习一下flutter项目默认代码运行之后的界面： 项目启动默认界面

我们不如根据项目界面中文本来找一下对应代码的位置：

一.先看一下main.dart中的默认代码（注释信息已经删除了，以后再解释注释含义）：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

咱们从头开始找：

• 网页的标题：Flutter Demo
  我们可以对应找到代码的位置为：

 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ... ...,
    );

我们尝试把对应的字符串修改为：

MaterialApp(
      title: '我的第一个Web界面',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ... ...,
    );

保存代码，（一定要保存代码，否则修改的代码不会执行）
运行代码:

flutter run -d chrome  //终端执行

我们可以看到效果为： 网页标题修改效果

• 界面导航栏(蓝色区域)标题：Flutter Demo Home Page
  我们可以找到对应的代码为：

MaterialApp(
      title: ... ...,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

我们尝试修改为：

MaterialApp(
      title: ... ...,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '项目首页'),
    );

保存代码，（一定要保存代码，否则修改的代码不会执行）
运行代码，这个时候注意，之前我们已经将项目运行起来了，Flutter项目有热更新的技能，我们直接在终端执行命令：

r   //热更新代码命令

我们可以看到效果为： 导航栏标题修改效果

• 界面中间的文本：You have pushed the button this many times:
  我们可以找到对应的代码：

Text('You have pushed the button this many times:',),

我们可以尝试修改为：

Text('你点击按钮的次数为:',),

保存代码，热更新代码，效果为：

中心文本修改效果

• 我们尝试点击右下角的加号按钮，我们可以看到每点击一次，界面中心的数字就增加1，那我们如何修改为每点击一次数字增加2呢？
  对应的代码为：

void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

这是个方法，里面的_counter++表示累加1计算，这个是基础的代码知识，我们将它修改为：

void _incrementCounter() {
    setState(() {
      _counter += 2;
    });
  }

(setState()表示更新界面UI)

保存并运行代码，我们可以看到，每点击一次按钮，数字增加2。