Flutter列表、抽屜、Tab、底部按鈕快速實例

觀念

物件都是Widget
樹狀結構
常用元件已定好實現參數

==========================資料(post.dart)==========================

class Post{
  const Post({//類似C++的Constructor
    this.title,
    this.author,
    this.imageUrl,
  });

  final String title;
  final String author;
  final String imageUrl;
}

//初始化列表給值
final List<Post> posts = [
  Post(
    title: 'Title1',
    author: 'Author1',
    imageUrl: 'https://pics1.baidu.com/feed/c8ea15ce36d3d539258179c355f7fc56342ab0ec.jpeg?token=b1269188a783ffac3a8fa9b5d2b423f8&s=0330E02254AB0AAC261F1CC90000C0B0'
  ),
  Post(
      title: 'Title2',
      author: 'Author2',
      imageUrl: 'https://pics2.baidu.com/feed/6609c93d70cf3bc79b66c0cbbe70afa7cd112a2c.jpeg?token=2770e8c64a553b63aac48448202bfc1a&s=E1F51BC68B042F70104CD8A903005006'
  ),
  Post(
      title: 'Title3',
      author: 'Author3',
      imageUrl: 'https://pics1.baidu.com/feed/1f178a82b9014a909ccf587ff0c72f14b11beeb1.jpeg?token=e7fd680ccbf6aa973c03573b0b8c3012&s=ED85BC540C009C591CA838950300D08C'
  ),
];

======================列表(listview_demo.dart)======================

import 'package:flutter/material.dart';
import '../model/post.dart';
class MyListView extends StatelessWidget{//StatelessWidge不可改變, StatefullWidget為可改變, 此處僅顯示列表並無改變採用StatelessWidget
  Widget _listItemBuilder(BuildContext context, int index){
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),//項目margin
      child: Column(//垂直項目Column如android的linearlayout
          children: <Widget>[
            Image.network(posts[index].imageUrl),//直接使用url便能載入, 可設填滿的類型Image.network(posts[index].imageUrl, fit: BoxFit.fill,width: double.infinity,)
            SizedBox(height: 16.0,),//設空白高度(間距)
             Row(//水平項目
                mainAxisAlignment: MainAxisAlignment.start,//內容置左
                children: <Widget>[
                  Icon(Icons.check_circle, size: 30.0, color: Colors.grey[300]),
                  Image.network(posts[index].imageUrl, width: 50,),
                  new Expanded(child: Text(//填滿該文字
                    posts[index].title,
                    style: Theme.of(context).textTheme.title,
                    textAlign: TextAlign.right,
                  ),)

                ]
            ),
            Text(
                posts[index].title,
                style: Theme.of(context).textTheme.title
            ),
            Text(
                posts[index].author,
                style: Theme.of(context).textTheme.subhead
            ),
            SizedBox(height: 16.0,)
          ]
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: _listItemBuilder,
    );
  }
}

======================抽屜(drawer_demo.dart)======================

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        drawer: MyDrawer(),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,//該項目無間距
        children: <Widget>[
          UserAccountsDrawerHeader(//大頭照及名稱信箱
            accountName: Text('Adam', style: TextStyle(fontWeight: FontWeight.bold),),
            accountEmail: Text('xxx@gmail.com', ),
            currentAccountPicture: CircleAvatar(//圓形圖
              backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580055708032&di=1ce2fa1deb54ead52a9020c4beb7cd97&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa8014c086e061d9513b305a87bf40ad163d9caac.jpg'),
            ),
            decoration: BoxDecoration(//大頭照底面
                color: Colors.yellow[400],
                image: DecorationImage(//裝飾圖片
                    image: NetworkImage('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232748475,1633793751&fm=26&gp=0.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: ColorFilter.mode(//濾鏡withOpacity給透明度
                        Colors.yellow[400].withOpacity(0.6),
                        BlendMode.hardLight
                    )
                )
            ),
          ),
          ListTile(//圖片文字項目, MyListView中Row的簡單應用可採用這個
            title: Text('Message', textAlign: TextAlign.right,),
            trailing: Icon(Icons.message, color: Colors.black12, size: 22.0,),//圖片在頭用leading, 在尾用trailing
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            title: Text('Favorite', textAlign: TextAlign.right,),
            trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0,),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            title: Text('Setting', textAlign: TextAlign.right,),
            trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0,),
            onTap: () => Navigator.pop(context),
          )
        ],
      ),
    );
  }
}

======================Tab(main.dart)======================

import 'package:flutter/material.dart';
import 'demo/basic_demo.dart';
import 'demo/bottom_navigationbar_demo.dart';
import 'demo/drawer_demo.dart';
import 'demo/listview_demo.dart';
import 'demo/hello_demo.dart';
void main() => runApp(App());
class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255,255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
}
class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,//tab有三頁
      child: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(//設定標題列
          leading: IconButton(//左側按鈕, 不給會預設菜單紐, 點擊會彈開drawer
              icon: Icon(Icons.star),
              tooltip: 'Navigration',
              onPressed: () => debugPrint('Navigration button is pressed!')
          ),
          title: Text('Adam'),
          centerTitle: true,
          actions: <Widget>[//右側其餘按鈕, 可多個
            IconButton(
                icon: Icon(Icons.search),
                tooltip: 'Search',
                onPressed: () => debugPrint('Search button is pressed!')
            ),
          ],
          elevation: 0.0,//tab下方陰影, 0為沒陰影
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.black54,
              indicatorSize: TabBarIndicatorSize.label,//下方線寬度, label為包住按鈕內容, tab為整個tab寬度
              indicatorWeight: 1.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_florist), text: 'test123',),//按鈕下方文字
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ]),
        ),
        body: TabBarView(//設定tab頁面內容, 可隨意給Icon, Text或自製的頁面
            children: <Widget>[
              MyListView(),
              Icon(Icons.change_history, size: 128.0, color: Colors.black12),
              Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
            ]
        ),
        //drawer: Container
        drawer: MyDrawer(),//設置抽屜
        bottomNavigationBar: MyBottomNavigationBar(),//設置底部按鈕
      ),
    );
  }
}

================底部按鈕(bottom_navigationbar_demo.dart)================

import 'package:flutter/material.dart';

class MyBottomNavigationBar extends StatefulWidget{//點下方按鈕要切換index, 用StatefulWidget
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BottomNavigationBarDemoState();
  }
}
class _BottomNavigationBarDemoState extends State<MyBottomNavigationBar>{
  int _currentIndex = 0;

  void _onTabHandler(int index){//點擊動作, 設置index
    setState((){
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onTabHandler,
        type: BottomNavigationBarType.fixed,//按鈕為固定型態
        fixedColor: Colors.black,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            title: Text('Explore'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history),
            title: Text('History'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('List'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('My'),
          ),
        ]
    );
  }
}

Flutter列表、抽屜、Tab、底部按鈕 快速實例

Flutter列表、抽屜、Tab、底部按鈕快速實例