こんにちは　皆さん！Dreamwalkerです。
皆さんはFlutterを使って楽しんで開発進んでいますか？

今回は15回目の私がDribbbleのサイトの中で、
気に入れたデザインをFlutterで作ってみた。。ということになります。

Dribbbleというサイトは色んなデザイナーさん達が色んなデザインを載せていて
デザインをの知識というか、デザイナーじゃない人でも、開発に参考になったり、役に立ったりするサイトです。まあ、デザインに対して、色んなサイトありますけれど私はDribbbleを愛用してます。

今回のデザイン

今回は15番目の「DribbbleのデザインをFlutterでやってみた」になります。

Flight Ticket

右側の席を選ぶ画面を作ってみたいと思います。

https://dribbble.com/shots/10862680-Flight-Ticket/attachments/2517650?mode=media

結果

必要なライブラリー

1．google_fonts: ^0.3.10

データモデル

seat.dart

class Seat {
  final bool isAvailable;
  Seat({this.isAvailable});
}

2次元配列

main.dart


_tmp = List.generate(_column, (index) => 
List<Seat>.generate(_row, (index) => 
Seat(isAvailable: random.nextBool())));
    _tmp.forEach((element) {
      element.forEach((e) {
        print(e.isAvailable);
   });
});

全てのコード

main。

main.dart

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutternotebook5th/generated/i18n.dart';
import 'package:google_fonts/google_fonts.dart';

class Seat {
  final bool isAvailable;
  Seat({this.isAvailable});
}

class FlightTicketApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TicketPage(),
    );
  }
}

class TicketPage extends StatefulWidget {
  @override
  _TicketPageState createState() => _TicketPageState();
}

class _TicketPageState extends State<TicketPage> {
  Color appColor = Color(0xff3959b4); // 57 89 180 dec to hex 39 59 b4
  List<Seat> _item;
  int _row = 10;
  int _column = 14;
  List<List<Seat>> _tmp;

  @override
  void initState() {
    // TODO: implement initState
    Random random = Random();
    //TODO: One Dimension Array
    _item = List<Seat>.generate(10, (index) => Seat(isAvailable: random.nextBool()));
    _item.forEach((element) {
      print(element.isAvailable);
    });

    //TODO : 2 Dimension Array
    _tmp =
        List.generate(_column, (index) => List<Seat>.generate(_row, (index) => Seat(isAvailable: random.nextBool())));
    _tmp.forEach((element) {
      element.forEach((e) {
        print(e.isAvailable);
      });
    });

    super.initState();
  }

  List<Widget> _buildSeatTitle() {
    return <Widget>[
      Expanded(
        child: Container(),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "A",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "B",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "C",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "D",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "E",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "F",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "G",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "H",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "I",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          child: Center(
            child: Text(
              "J",
              style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 8,
              right: 24,
              top: 0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.keyboard_arrow_left),
                  Spacer(),
                  Text(
                    "Your Ticket",
                    style: GoogleFonts.montserrat(fontSize: 20),
                  ),
                  Spacer(),
                ],
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              top: 48,
              bottom: 0,
              child: Container(
                decoration: BoxDecoration(
                  color: appColor,
                  borderRadius: BorderRadius.circular(24),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 24, top: 16),
                        child: Text(
                          "Select Seats",
                          style: GoogleFonts.montserrat(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 16),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 28,
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            flex: 1,
                            child: Row(
                              children: _buildSeatTitle(),
                            ),
                          ),
                          Expanded(
                            flex: 15,
                            child: ListView.builder(
                                itemCount: _tmp.length,
                                itemBuilder: (context, index) {
                                  List<Seat> _seatItems = _tmp[index];
                                  int idx = 30 + index;
                                  return Padding(
                                    padding: const EdgeInsets.all(6.0),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                            child: Text(
                                          idx.toString(),
                                          style: GoogleFonts.montserrat(fontSize: 12, color: Colors.white),
                                        )),
                                        Expanded(
                                          child: _seatItems[0].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[1].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[2].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: Container(),
                                        ),
                                        Expanded(
                                          child: _seatItems[3].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[4].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[5].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[6].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(child: Container()),
                                        Expanded(
                                          child: _seatItems[7].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[8].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: _seatItems[9].isAvailable
                                              ? Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius: BorderRadius.circular(6),
                                                  ),
                                                )
                                              : Container(
                                                  margin: EdgeInsets.symmetric(horizontal: 3),
                                                  height: 20,
                                                  width: 24,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(color: Colors.white),
                                                      borderRadius: BorderRadius.circular(6)),
                                                ),
                                        ),
                                        Expanded(
                                          child: Container(),
                                        ),
                                      ],
                                    ),
                                  );
                                }),
                          )
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 4,
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 16),
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    height: 24,
                                    width: 24,
                                    decoration: BoxDecoration(
                                        color: Colors.indigoAccent, borderRadius: BorderRadius.circular(6)),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text(
                                      "Choosen",
                                      style: GoogleFonts.montserrat(color: Colors.white, fontSize: 11),
                                    ),
                                  ),
                                  Spacer(),
                                  Container(
                                    height: 24,
                                    width: 24,
                                    decoration: BoxDecoration(
                                        border: Border.all(color: Colors.white),
                                        borderRadius: BorderRadius.circular(6)),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text(
                                      "Available",
                                      style: GoogleFonts.montserrat(color: Colors.white, fontSize: 11),
                                    ),
                                  ),
                                  Spacer(),
                                  Container(
                                    height: 24,
                                    width: 24,
                                    decoration:
                                        BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(6)),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text(
                                      "Blocked",
                                      style: GoogleFonts.montserrat(color: Colors.white, fontSize: 11),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(right: 24, top: 8),
                              child: Align(
                                alignment: Alignment.centerRight,
                                child: MaterialButton(
                                  elevation: 8,
                                  color: appColor,
                                  onPressed: () {},
                                  child: Text(
                                    "Confirm",
                                    style: GoogleFonts.montserrat(
                                      fontSize: 12,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(flex: 4, child: Container()),
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              child: Container(
                height: 64,
                padding: EdgeInsets.symmetric(horizontal: 24),
                decoration: BoxDecoration(
                    color: Colors.grey[50],
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(24),
                      topRight: Radius.circular(24),
                    )),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.home),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.card_giftcard),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.style),
                      color: Colors.indigoAccent,
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.person_outline),
                      onPressed: () {},
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

終わりに

今回も読んでくださってありがとうございます。