iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0
自我挑戰組

基礎學習Flutter系列 第 12

Day12-學習[Building for iOS with Flutter]得出基礎應用程式

  • 分享至 

  • xImage
  •  
  • Cupertino widgets
    基於Apple Human Interface Guidelines 實現了當前的IOS設計風格.
  • Provider:
    與每次創建一個新類別相比,大大減少了樣板程式碼.
    開發工具友善–使用 Provider,應用程式的狀態將在Flutter開發工具中可見.
  • tabBuilder
    IndexedWidgetBuilder建構的小工具通常是CupertinoTabView,以實現具有選項卡欄的IOS應用程式上看到的平行分層資訊架構. CupertinoTabView建立單獨的導覽的根視圖.
import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';
import 'package:veggietracker/data/models.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return ChangeNotifierProvider<AppState>(
      builder: (context) => AppState(),
      child: CupertinoApp(
        debugShowCheckedModeBanner: false,
        theme: CupertinoThemeDatal(
          primaryColor: Color(OxFFFF2D55),//紅色日誌圖示
          ),
          home: MainScreen(),
        ),
     );
   }
}
class MainScreen extends StatelessMidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            title: Text('Log'),
            icon: Icon (Cupertinolcons.book),
            ), // BottomNavigationbarItem
          BottomNavigationBariten(
            title: Text('List'),
            icon: Icon(CupertinoIcons.create), 
            ), // BottomNavigationBarItem
         ],
        ), // CupertinoTabBar
        resizeToAvoidBottomInset: false,
        tabBuilder: (context, index) {
          return(index == 0 )
              ?CupertinotabView(builder:(context) => LogScreen())
              :CupertinotabView(builder:(context) => ListScreen());
        },
    ): // CupertinoTabScaffold
   }
  }

class LogScreen extends Statelesswidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Log Screen!'),
    );
  }
}    

class Listscreen extends Statelesswidget {
  @override
  Widget build (BuildContext context) {
    return Center(
      child: Text('List Screen!'),
  }
}

class ADDtOLOGsCREEN extends Statelesswidget {
  @override
  Widget build (BuildContext context) {
    return Center(
      child: Text('Add to Log Screen!'),
    );
  }
}

https://ithelp.ithome.com.tw/upload/images/20230927/20130175El6Z1rEjV9.jpg


上一篇
Day11-學習[Building for iOS with Flutter]得出小部件
下一篇
Day13-學習[Building for iOS with Flutter]得出基礎應用程式
系列文
基礎學習Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言