flufでeverytimeスケジュールを真似する

💬 理由の作成

いくら探しても似たようなコードが見つからない...一つ作るといいなと思って作ってみました
もっといい方法があれば、お知らせください.

🔨 まねる

1.フレームを作る

List week = ['월', '화', '수', '목', '금'];
var kColumnLength = 22;
double kFirstColumnHeight = 20;
double kBoxSize = 52;

使う変数、サイズは私の心です

Container(
	height: kColumnLength / 2 * kBoxSize + kColumnLength,
	decoration: BoxDecoration(
		border: Border.all(color: Colors.grey),
		borderRadius: BorderRadius.circular(12),
	),
)

まずeverytimeスケジュールのようにグレーのフレームを作ります.高さをそのように設定する理由があるはずですが….今はしばらく経ったかもしれませんが、覚えていません.

2.row中心かcolumn中心か

スケジュールを作り始めたばかりの頃は、もちろんrowで積み重ねていました.しかし月火水木金曜日は何の関係もなく、1時間ごとに色とりどりのスピーカーを詰め込むので、拭き取ってcolumnに積み上げます.

Row(
  children: [
    Column(),
  ],
)

そのままContainerのchildを構築しました.

時間列の作成

Expanded buildTimeColumn() {
  return Expanded(
    child: Column(
      children: [
        SizedBox(
          height: kFirstColumnHeight,
        ),
        ...List.generate(
          kColumnLength,
          (index) {
            if (index % 2 == 0) {
              return const Divider(
                color: Colors.grey,
                height: 0,
              );
            }
            return SizedBox(
              height: kBoxSize,
              child: Center(child: Text('${index ~/ 2 + 9}')),
            );
          },
        ),
      ],
    ),
  );
}

まず、Sizedboxでeverytimeスケジュールのようにスペースを作成します.次はタイムリストの作成です今は複雑に見えますねTextとDividerが交互に戻ってセルを作成します.

ここまでやったのはそうだった.

作成曜日

List<Widget> buildDayColumn(int index) {
  return [
    const VerticalDivider(
      color: Colors.grey,
      width: 0,
    ),
    Expanded(
      flex: 4,
      child: Stack(
        children: [
          Column(
            children: [
              SizedBox(
                height: 20,
                child: Text(
                  '${week[index]}',
                ),
              ),
              ...List.generate(
                kColumnLength,
                (index) {
                  if (index % 2 == 0) {
                    return const Divider(
                      color: Colors.grey,
                      height: 0,
                    );
                  }
                  return SizedBox(
                    height: kBoxSize,
                    child: Container(),
                  );
                },
              ),
            ],
          )
        ],
      ),
    ),
  ];
}

礼拝をするときは何とかしてスピーカーを畳みます.flutはスタックを提供しているので、それを利用して重ねたいと思っています.9時30分に始まる授業、10時15分に終わる授業のように、格子の大きさや他の授業を考えてはいけないのではないかと思っています.5回実行し、週ごとに作成する.
参照としてListを返すので、拡張オペレータ(…)を使用します.釈放を通過しなければならない.

3.筑河

週ごとに作ったので、スタックに講義を積むことができます.

Positioned(
  child: Container(
    color: Colors.green,
  ),
  top: kFirstColumnHeight + kBoxSize / 2,
  height: kBoxSize + kBoxSize * 0.5,
  width: 100,
),

このように埋め尽くせばいいのです適当に講義モデルを入れて完成!