Flutter × UI #01 ~ agexコーポレートサイトをトレースしてみた (ヘッダー編) ~

class HeaderMenuItem extends StatefulWidget {
  const HeaderMenuItem({Key key}) : super(key: key);

  @override
  _HeaderMenuItemState createState() => _HeaderMenuItemState();
}

class _HeaderMenuItemState extends State {
  // 初期透明度
  double _opacity = 0;
  // 初期ライン横幅
  double _lineRatio = 0.5;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (details) => _onEnterHandler(details, context),
      child: AnimatedContainer(
        width: 100 * _lineRatio, // ラインの横幅。100は一時的に設定
        height: 2, // ラインの高さ（太さ）
        color: Colors.black.withOpacity(_opacity),
        curve: Curves.linear,
        duration: Duration(milliseconds: 200),
      ),
    );
  }

  // onEnterに登録するコールバック関数
  void _onEnterHandler(PointerEvent details, BuildContext context) {
    // ライン横幅を最大に
    _lineRatio = 1;
    // 透明度を最大に
    _opacity = 1;
    // 画面の更新
    setState(() {
    });
  }
}

@override
Widget build(BuildContext context) {
  return MouseRegion(
    onEnter: (details) => _onEnterHandler(details, context),
    onExit: (details) => _onExitHandler(details, context),
    child: AnimatedContainer(
      width: 100 * _lineRatio, // ラインの横幅。100は一時的に設定
      height: 2, // ラインの高さ（太さ）
      color: Colors.black.withOpacity(_opacity),
      curve: Curves.linear,
      duration: Duration(milliseconds: 200),
    ),
  );
}

・
・
・

// onExitに登録するコールバック関数
void _onExitHandler(PointerEvent details, BuildContext context) {
  // ライン横幅を初期値に
  _lineRatio = 0.5;
  // 透明度を初期値に
  _opacity = 0;
  // 画面の更新
  setState(() {
  });
}

class HeaderMenuItem extends StatefulWidget {
  final itemName; // 各アイテム名
  final link; // ヘッダーのリンク先URL
  final double fontSize = 16; // ヘッダーアイテム名のフォントサイズ

  const HeaderMenuItem({Key key, this.itemName, this.link}) : super(key: key);

  @override
  _HeaderMenuItemState createState() => _HeaderMenuItemState();
}

class _HeaderMenuItemState extends State {

・
・
・

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (details) => _onEnterHandler(details, context),
      onExit: (details) => _onExitHandler(details, context),
      child: Column(
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
                child: Text(
                  widget.itemName,
                  style: GoogleFonts.robotoCondensed(
                  fontSize: widget.fontSize,
                  wordSpacing: 0,
                  letterSpacing: 5,
                ),
              ),
            ),
          ),
          AnimatedContainer(
            width: 100 * _lineRatio, // ラインの横幅。100は一時的に設定
            height: 2, // ラインの高さ（太さ）
            color: Colors.black.withOpacity(_opacity),
            curve: Curves.linear,
            duration: Duration(milliseconds: 200),
          ),
        ],
      ),
    );
  }

・
・
・

}

AnimatedContainer(
  width: 100 * _lineRatio, // ラインの横幅。100は一時的に設定
  height: 2, // ラインの高さ（太さ）
  color: Colors.black.withOpacity(_opacity),
  curve: Curves.linear,
  duration: Duration(milliseconds: 200),
),

double lineWidth(String text) {
  var textPainter = TextPainter(
    text: TextSpan(
      text: text,
      style: GoogleFonts.robotoCondensed(
        fontSize: widget.fontSize,
        wordSpacing: 0,
        letterSpacing: 5,
      ),
    ),
    textDirection: TextDirection.ltr,
  )..layout();

  return textPainter.width;
}

AnimatedContainer(
  width: lineWidth(widget.itemName) * _lineRatio, // ラインの横幅
  height: 2, // ラインの高さ（太さ）
  color: Colors.black.withOpacity(_opacity),
  curve: Curves.linear,
  duration: Duration(milliseconds: 200),
),

import ‘package:flutter/material.dart’;
import ‘header_menu_item.dart’;

class Header extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.expand(
        // ヘッダーサイズ
        width: 1240,
        height: 80,
      ),
      child: Row(
        children: [
          // ロゴも入れてあげる
          Padding(
            padding: const EdgeInsets.only(right: 30),
            child: Image.asset(
              ‘lib/assets/images/logo.png’,
            ),
          ),
          const HeaderMenuItem(
            itemName: ‘BUSINESS’,
          ),
          const HeaderMenuItem(
            itemName: ‘RECRUIT’,
          ),
          const HeaderMenuItem(
            itemName: ‘BLOG’,
          ),
          const HeaderMenuItem(
            itemName: ‘COMPANY’,
          ),
          const HeaderMenuItem(
            itemName: ‘CONTACT’,
          ),
          const Spacer(),
        ],
      ),
    );
  }
}