Reverse chat layout

main.dart

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> messages = [
    'Hey!',
    'What\'s up?',
    'Want to grab Dinner?',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Demo'),
        ),
        body: CustomScrollView(
          reverse: true,
          slivers: [
            SliverList.builder(
              itemCount: messages.length,
              itemBuilder: (_, int i) {
                int index = messages.length - (i + 1);
                return Text(messages[index]);
              },
            ),
          ],
        ));
  }
}