【Flutter】AppBarのドロップシャドウを消す方法

こんにちは、株式会社Pentagon代表の山本です。
https://pentagon.tokyo
当社では「アプリを駆使した事業を立ち上げたい」方のために、アプリの設計・デザイン・開発までまるっとサポートしています。
AppBarのドロップシャドウを消す方法について調べたので、まとめてました。

目次

結論:elevationの値をセットする

import 'package:flutter/material.dart';

void main() {
runApp(
  MaterialApp(
    title: 'TestApp',
    theme: ThemeData(primarySwatch: Colors.blue),
    home: MyPage(),
  ),
);
}

class MyPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyPageState();
}

class MyPageState extends State<MyPage> {

 double elevation = null;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
      elevation: elevation,
      title: const Text('タイトル'),
     ),
     body: Center(
       child: RaisedButton(
         child: Text(elevation == null ? '消す':'付ける'),
         color: Colors.blue,
         textColor: Colors.white,
         onPressed: () {
           setState(() {
                elevation = elevation == null ? 1 : null;
           });
         },
       ),
     ),
   );
 }
}
採用情報はこちら
目次