MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] カスタムウィジット(Custom Widget)の作り方

[Flutter] カスタムウィジット(Custom Widget)の作り方

Flutter

Flutterは、カスタムウィジェットを簡単に作成できる柔軟なフレームワークです。この記事では、Flutterでカスタムウィジェットを作成する方法を説明します。

目次

ステップ1：ウィジェットの作成

最初に、カスタムウィジェットを作成する必要があります。カスタムウィジェットを作成するには、StatelessWidgetまたはStatefulWidgetを使用します。

以下は、StatelessWidgetを使用してカスタムウィジェットを作成する例です。

import 'package:flutter/material.dart';

class CustomWidget extends StatelessWidget {
  final String text;

  const CustomWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.blue[200],
      ),
      child: Text(text),
    );
  }
}

この例では、ContainerとTextウィジェットを使用してカスタムウィジェットを作成しました。このウィジェットは、テキストを受け取り、グレーの背景と丸角を持つコンテナで囲まれたテキストを表示します。

ステップ2：ウィジェットの使用

次に、作成したカスタムウィジェットを使用してみましょう。以下は、カスタムウィジェットを使用してリストを作成する例です。

import 'package:flutter/material.dart';

import 'custom_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Widget Demo'),
        ),
        body: CustomWidgetList(items: items),
      ),
    );
  }
}


class CustomWidgetList extends StatelessWidget {
  final List<String> items;

  const CustomWidgetList({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        return CustomWidget(text: items[index]);
      },
    );
  }
}

この例では、ListView.builderを使用して、カスタムウィジェットを表示するリストを作成しました。CustomWidgetListウィジェットは、テキストのリストを受け取り、カスタムウィジェットを含むリストビューを作成します。

まとめ

Flutterでカスタムウィジェットを作成する方法を説明しました。最初に、StatelessWidgetまたはStatefulWidgetを使用してカスタムウィジェットを作成します。次に、作成したカスタムウィジェットを使用してリストビューなどのウィジェットを作成します。最後に、作成したカスタムウィジェットを使用してアプリを作成します。Flutterの柔軟性を活用して、アプリに独自のウィジェットを作成することができます。

Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次