example chat_gpt4_chat

chat_gpt4_chat.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const ChatScreen());
  }
}

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  List<ChatMessage> messages = [
    const ChatMessage(
        message:
            "日本気象協会公式の天気予報専門メディアです。市区町村別のピンポイントな天気予報に加え、専門的な気象情報、地震・津波などの防災情報を提供します。",
        isUser: false),
    const ChatMessage(
        message:
            "あすの関東は天気が回復し、おおむね晴れるでしょう。朝のうちはヒンヤリとした北よりの風が吹きますが、次第に暖かい南風に変わります。最高気温は、東京都心で23度、横浜と千葉で21度、さいたまで22度の予想です。きょうより高く、広い範囲で20度を超えるでしょう。日中は、シャツ一枚など軽めの装いで過ごせそうです。夕方以降も、気温の下がり方は緩やかでしょう。",
        isUser: true),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('チャット風ListView'),
      ),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
        itemCount: messages.length,
        itemBuilder: (BuildContext context, int index) {
          return messages[index];
        },
      ),
    );
  }
}

class ChatMessage extends StatelessWidget {
  final String message;
  final bool isUser;

  const ChatMessage({super.key, required this.message, required this.isUser});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 5.0),
      child: Row(
        mainAxisAlignment:
            isUser ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: <Widget>[
          Container(
            constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width * 0.75),
            padding: const EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              color: isUser ? Colors.blue : Colors.grey,
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: RichText(
              text: TextSpan(
                text: message,
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}