OutlineButtonのボーダーを削除する方法

方法1: テーマを使用する方法

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        buttonTheme: ButtonThemeData(
          shape: RoundedRectangleBorder(
            side: BorderSide.none, // ボーダーを削除
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlineButtonのボーダーを削除する方法'),
        ),
        body: Center(
          child: OutlineButton(
            onPressed: () {},
            child: Text('ボタン'),
          ),
        ),
      ),
    );
  }
}

方法2: ElevatedButtonをカスタマイズする方法

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlineButtonのボーダーを削除する方法'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide.none, // ボーダーを削除
                ),
              ),
            ),
            child: Text('ボタン'),
          ),
        ),
      ),
    );
  }
}

上記のコード例では、テーマを使用する方法とElevatedButtonをカスタマイズする方法の2つを示しました。どちらの方法でも、ボーダーを削除するためにside: BorderSide.noneを使用しています。

このようにして、OutlineButtonのボーダーを削除することができます。