Flutter实践-01

偏执的太偏执、 2022-02-28 07:58 219阅读 0赞

# Flutter实战-01 #

# Demo #

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Text(
            "Hello,world",
            textDirection: TextDirection.ltr,
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        );
      }
    }

# StatelessWidget template #

// bold_text.dart
    import 'package:flutter/material.dart';
    
    class BoldText extends StatelessWidget {
    
      final String data;
    
      BoldText(this.data);
    
      @override
      Widget build(BuildContext context) {
        return _buildWidget();
      }
    
      Widget _buildWidget() {
        return Text(
          data,
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        );
      }
    
    }
    
    // main.dart
    import 'package:flutter/material.dart';
    
    import 'bold_text.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: BoldText('Hello, world!'),
        );
      }
    }

注意：statelesswidget 返回的是一个Widget.

# StatefulWidget template #

// increment.dart
    import 'package:flutter/material.dart';
    
    class Increment extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        return _IncrementState();
      }
    
    }
    
    class _IncrementState extends State<Increment> {
      int _count = 0;
      void _incrementCount() {
        setState(() {
          _count++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return _buildPage();
      }
    
      Widget _buildPage() {
        return MaterialApp(
          home: Scaffold(
            body: Center( 
                child : Text('$_count')
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCount,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ),
        );
      }  
    }
    
    // main.dart
    import 'package:flutter/material.dart';
    import 'increment.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Increment();
      }
    }

注意：这里需要State进行build产生Widget，同时每次界面刷新都是通过createState进行渲染的更新。

选用标准：

**看界面是否需要更新**，需要更新的都选择StatefulWidget，静态显示使用StatelessWidget。

# Scaffold Demo #

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      int _navBarSel = 0;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(
            title: Text("Flutter Demo"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.share),
                onPressed: _onAppBarTap,
              )
            ],
          ),
          drawer: null,
          body: Center(
            child: Text('Current select item is: $_navBarSel'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.airplay), title: Text("Fly")),
              BottomNavigationBarItem(icon: Icon(Icons.book), title: Text("Book")),
            ],
            currentIndex: _navBarSel,
            fixedColor: Colors.blue,
            onTap: _onNavBarTap,
          ),
    //      floatingActionButton:
    //          FloatingActionButton(child: Icon(Icons.backspace), onPressed: _onFloatBtnTap),
        ));
      }
    
      void _onFloatBtnTap() {
        print("Float button click");
      }
    
      void _onAppBarTap() {
        print("Link button click!");
      }
    
      void _onNavBarTap(int index) {
        setState(() {
          _navBarSel = index;
          print(index);
        });
      }
    }

# 路由Demo1 #

import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: '应用程序首页'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      void _openNewPage() {
        setState(() {
          Navigator.of(context).push(new MaterialPageRoute<Null>(
            builder: (BuildContext context) {
              return new Scaffold(
                appBar: new AppBar(
                    title: new Text('新的页面')
                ),
                body: new Center(
                  child: new Text(
                    '点击浮动按钮返回首页',
                  ),
                ),
                floatingActionButton: new FloatingActionButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: new Icon(Icons.replay),
                ),
              );
            },
          ));
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Text(
              '点击浮动按钮打开新页面',
            ),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: _openNewPage,
            child: new Icon(Icons.open_in_new),
          ),
        );
      }
    }

# 路由Demo2 #

import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          home: new MyHomePage(title: '应用程序首页'),
          routes: <String, WidgetBuilder> {
            '/a': (BuildContext context) => new MyPage(title: 'A 页面'),
            '/b': (BuildContext context) => new MyPage(title: 'B 页面'),
            '/c': (BuildContext context) => new MyPage(title: 'C 页面')
          },
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text(widget.title),
            ),
            body: new Row(
                children: <Widget>[
                  new RaisedButton(
                    child: new Text('A按钮'),
                    onPressed: () { Navigator.of(context).pushNamed('/a'); },
                  ),
                  new RaisedButton(
                    child: new Text('B按钮'),
                    onPressed: () { Navigator.of(context).pushNamed('/b'); },
                  ),
                  new RaisedButton(
                    child: new Text('C按钮'),
                    onPressed: () { Navigator.of(context).pushNamed('/c'); },
                  )
                ]
            )
        );
      }
    }
    
    class MyPage extends StatelessWidget {
      MyPage({Key key, this.title}) : super(key: key);
      final String title;
    
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
              title: new Text(title)
          ),
          body: new Center(
            child: new Text(
              "页面内容：$title",
              textDirection: TextDirection.ltr,
              textAlign: TextAlign.center,
            ),
          ),
        );
      }
    }

如果应用程序只有一个页面，那么可以使用`home`指定它，如果指定了`home`，那么在此映射中为`Navigator.defaultRouteName`提供路由是一个错误。如果请求没有在此表中指定的路由（或通过`home`），则会调用`onGenerateRoute`回调来构建页面。

# 聊天APP代码学习 #

## 基础界面+动画 ##

import 'package:flutter/material.dart';
    
    void main() {
      runApp(new TalkcasuallyApp());
    }
    
    class TalkcasuallyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: '谈天说地',
          home: new ChatScreen(),
        );
      }
    }
    
    class ChatScreen extends StatefulWidget {
      @override
      State createState() => new ChatScreenState();
    }
    
    class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
      final TextEditingController _textController = new TextEditingController();
      final List<ChatMessage> _messages = <ChatMessage>[];
    
      @override
      void dispose() {
        for (ChatMessage message in _messages)
          message.animationController.dispose();
        super.dispose();
      }
    
      void _handleSubmitted(String text) {
        if (text.length < 1) {
          return;
        }
        _textController.clear();
        ChatMessage message = new ChatMessage(
          text: text,
          animationController: new AnimationController(
            duration: new Duration(milliseconds: 300),
            vsync: this,
          ),
        );
        setState(() {
          _messages.insert(0, message);
        });
        message.animationController.forward();
      }
    
      Widget _buildTextComposer() {
        return new IconTheme(
            data: new IconThemeData(color: Theme.of(context).accentColor),
            child: new Container(
                margin: const EdgeInsets.symmetric(horizontal: 8.0),
                child: new Row(
                  children: <Widget>[
                    new Container(
                      margin: new EdgeInsets.symmetric(horizontal: 4.0),
                      child: new IconButton(
                          icon: new Icon(Icons.photo_camera), onPressed: () {}),
                    ),
                    new Flexible(
                        child: new TextField(
                      controller: _textController,
                      onSubmitted: _handleSubmitted,
                      decoration: new InputDecoration.collapsed(hintText: '发送消息'),
                    )),
                    new Container(
                      margin: new EdgeInsets.symmetric(horizontal: 4.0),
                      child: new IconButton(
                        icon: new Icon(Icons.send),
                        onPressed: () => _handleSubmitted(_textController.text),
                      ),
                    )
                  ],
                )));
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('谈天说地'),
          ),
          body: new Column(
            children: <Widget>[
              new Flexible(
                child: new ListView.builder(
                  padding: new EdgeInsets.all(8.0),
                  itemBuilder: (_, int index) => _messages[index],
                  reverse: true,
                  itemCount: _messages.length,
                ),
              ),
              new Divider(
                height: 1.0,
              ),
              new Container(
                decoration: new BoxDecoration(
                  color: Theme.of(context).cardColor,
                ),
                child: _buildTextComposer(),
              )
            ],
          ),
        );
      }
    }
    
    const String _name = "hekaiyou";
    
    class ChatMessage extends StatelessWidget {
      ChatMessage({this.text, this.animationController});
    
      final String text;
      final AnimationController animationController;
    
      @override
      Widget build(BuildContext context) {
        return new SizeTransition(
          sizeFactor: new CurvedAnimation(
            parent: animationController,
            curve: Curves.easeOut,
          ),
          axisAlignment: 0.0,
          child: new Container(
            margin: const EdgeInsets.symmetric(vertical: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Container(
                  margin: const EdgeInsets.only(right: 16.0),
                  child: new CircleAvatar(child: new Text(_name[0])),
                ),
                new Flexible(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Text(_name, style: Theme.of(context).textTheme.subhead),
                      new Container(
                        margin: const EdgeInsets.only(top: 5.0),
                        child: new Text(text),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

# 带有导航的Demo #

import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MaterialApp(
        title: "Flutter Demo",
        home: new MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      @override
      State createState() {
        return new MyAppState();
      }
    }
    
    class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
      TabController _tabController;
    
      @override
      void initState() {
        _tabController = new TabController(length: 3, vsync: this);
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("AppBar title"),
          ),
          body: new TabBarView(
            controller: _tabController,
            children: <Widget>[
              new Center(child: Text("Tab A")),
              new Center(child: Text("Tab B")),
              new Center(child: Text("Tab C")),
            ],
          ),
          bottomNavigationBar: new Material(
            color: Theme.of(context).accentColor,
            child: new TabBar(
              controller: _tabController,
              tabs: <Tab>[
                new Tab(
                  text: "Home",
                  icon: new Icon(Icons.home),
                ),
                new Tab(
                  text: "Fly",
                  icon: new Icon(Icons.airport_shuttle),
                ),
                new Tab(
                  text: "Book",
                  icon: new Icon(Icons.book),
                ),
              ],
            ),
          ),
        );
      }
    }