Chapter 05

5. まずは見た目から(timeline&settings編)

antman
antman
2021.11.30に更新

timeline_view.dartとsettings_view.dart

timeline_view.dart
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:timeline_tile/timeline_tile.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';


class TimeLine extends HookConsumerWidget {
  const TimeLine({Key? key}) : super(key: key);

  
  Widget build(BuildContext context, WidgetRef ref) {
    List<Widget> timelineTiles = [];
    return Scaffold(
      body: Center(
        child: ListView(
          children: timelineTiles,
        ),
      ),
    );
  }
}

空のリストをListViewで表示しているだけです。

settings_view.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class Settings extends HookConsumerWidget {
  const Settings({Key? key}) : super(key: key);

  
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Card(
        child: ListTile(
          title: Text('Notify Setting'),
          subtitle: Text('何時間前に通知するか設定します'),
          trailing: Icon(Icons.notifications),
          onTap: () {
          },
        ),
      ),
    );
  }
}

これでtodo,timeline,settingsの画面が完成しました。あとはroot.dartを開いて、画面を切り替えれるようにしましょう!

root.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:test_xenn/view/todo/todo_view.dart';
import 'package:test_xenn/view/timeline/timeline_view.dart'; //追加
import 'package:test_xenn/view/settings/settings_view.dart'; //追加

class Root extends HookConsumerWidget {
  const Root({Key? key}) : super(key: key);

  
  Widget build(BuildContext context, WidgetRef ref) {
    List<String> keys = ["Home", "TimeLine", "Settings"];
    List<Icon> icons = [
      Icon(Icons.home),
      Icon(Icons.timeline),
      Icon(Icons.settings),
    ];
    List<Widget> pages = [Todo(), TimeLine(), Settings()];//追加
    final page_state = useState(0);
    List<BottomNavigationBarItem> navi_items = [];
    for (int i = 0; i < keys.length; i++) {
      navi_items.add(BottomNavigationBarItem(
        icon: icons[i],
        label: keys[i],
      ));
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(keys[page_state.value]),
      ),
      body: pages[page_state.value], //変更
      bottomNavigationBar: BottomNavigationBar(
        items: navi_items,
        currentIndex: page_state.value,
        onTap: (index) {
          page_state.value = index;
        },
      ),
    );
  }
}

まとめ

今回はこれで終わりです!
これで3つの画面を切り替えることができるようになりましたね。
次の章では通知を設定する画面notify_setting_view.dartを作成します。
次の章で大体の見た目を整えるのは終わりです。