Udemyセール開催中! 対象コースが1,220円から

【Flutter】Neumorphism(ニューモーフィズム)ボタンを外部パッケージなしで作る

今回はYoutubeチャンネル「Flutter Mapp」で外部パッケージなしでNeumorphism Buttonを作るのが面白かったので本記事で紹介させていただきます。

記事の最後に引用したYoutube動画を載せています!

目次

コピペ用:Neumorphism Buttonのコード

RunしたらUIの真ん中をクリックしてみてください。

import 'package:flutter/material.dart';

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

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

  @override
  State<NeumorphismPage> createState() => _NeumorphismPageState();
}

class _NeumorphismPageState extends State<NeumorphismPage> {
  bool _isElevated = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _isElevated = !_isElevated;
              });
            },
            child: AnimatedContainer(
              duration: const Duration(
                milliseconds: 200,
              ),
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(50),
                boxShadow: _isElevated
                    ? [
                        const BoxShadow(
                          color: Colors.grey,
                          offset: Offset(4, 4),
                          blurRadius: 15,
                          spreadRadius: 1,
                        ),
                        const BoxShadow(
                          color: Colors.white,
                          offset: Offset(-4, -4),
                          blurRadius: 15,
                          spreadRadius: 1,
                        ),
                      ]
                    : null,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

コード引用元:Flutter Mapp Youtube Channel

  • URLをコピーしました!
目次
閉じる