ทบทวน Layout Widget ตอนที่ 2 Multi child Layout

import 'package:flutter/material.dart';
  
class Home extends StatefulWidget {
    static const routeName = '/home';
 
    const Home({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
  
class _HomeState extends State<Home> {
  
    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
                leading: IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                ),                
            ),
            body: GradientColumnExample(),
        );
    }
}

class GradientColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // จัดวาง container ให้ห่างกันเท่ากัน
        children: [
          _buildGradientContainer(Colors.red, Colors.orange),
          _buildGradientContainer(Colors.blue, Colors.purple),
          _buildGradientContainer(Colors.green, Colors.yellow),
        ],
      ),
    );
  }

  Widget _buildGradientContainer(Color startColor, Color endColor) {
    return Container(
      width: 200, // กำหนดความกว้างของ container
      height: 100, // กำหนดความสูงของ container
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [startColor, endColor],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(12.0), // เพิ่มมุมมนให้ container
      ),
    );
  }
}

class CustomMultiChildLayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: MyLayoutDelegate(),
      children: [
        LayoutId(
          id: 'header',
          child: Container(
            color: Colors.blue,
            child: Text(
              'Header',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            padding: EdgeInsets.all(16),
          ),
        ),
        LayoutId(
          id: 'body',
          child: Container(
            color: Colors.green,
            child: Text(
              'Body',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            padding: EdgeInsets.all(16),
          ),
        ),
        LayoutId(
          id: 'footer',
          child: Container(
            color: Colors.red,
            child: Text(
              'Footer',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            padding: EdgeInsets.all(16),
          ),
        ),
      ],
    );
  }
}

class MyLayoutDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    // วางตำแหน่งและกำหนดขนาดของ header
    if (hasChild('header')) {
      final headerSize = layoutChild('header', BoxConstraints.loose(size));
      positionChild('header', Offset(0, 0));
    }

    // วางตำแหน่งและกำหนดขนาดของ body
    if (hasChild('body')) {
      final bodySize = layoutChild('body', BoxConstraints.loose(size));
      positionChild('body', Offset(0, 100));
    }

    // วางตำแหน่งและกำหนดขนาดของ footer
    if (hasChild('footer')) {
      final footerSize = layoutChild('footer', BoxConstraints.loose(size));
      positionChild('footer', Offset(0, size.height - footerSize.height));
    }
  }

  @override
  bool shouldRelayout(MyLayoutDelegate oldDelegate) => false;
}

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

  @override
  State<CarouselExample> createState() => _CarouselExampleState();
}

class _CarouselExampleState extends State<CarouselExample> {
  final CarouselController controller = CarouselController(initialItem: 1);

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.sizeOf(context).height;

    return ListView(
      children: <Widget>[
        ConstrainedBox(
          constraints: BoxConstraints(maxHeight: height / 2),
          child: CarouselView.weighted(
            controller: controller,
            itemSnapping: true,
            flexWeights: const <int>[1, 7, 1],
            children: ImageInfo.values.map((ImageInfo image) {
              return HeroLayoutCard(imageInfo: image);
            }).toList(),
          ),
        ),
        const SizedBox(height: 20),
        const Padding(
          padding: EdgeInsetsDirectional.only(top: 8.0, start: 8.0),
          child: Text('Multi-browse layout'),
        ),
        ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 50),
          child: CarouselView.weighted(
            flexWeights: const <int>[1, 2, 3, 2, 1],
            consumeMaxWeight: false,
            children: List<Widget>.generate(20, (int index) {
              return ColoredBox(
                color: Colors.primaries[index % Colors.primaries.length]
                    .withOpacity(0.8),
                child: const SizedBox.expand(),
              );
            }),
          ),
        ),
        const SizedBox(height: 20),
        ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 200),
          child: CarouselView.weighted(
              flexWeights: const <int>[3, 3, 3, 2, 1],
              consumeMaxWeight: false,
              children: CardInfo.values.map((CardInfo info) {
                return ColoredBox(
                  color: info.backgroundColor,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(info.icon, color: info.color, size: 32.0),
                        Text(info.label,
                            style: const TextStyle(fontWeight: FontWeight.bold),
                            overflow: TextOverflow.clip,
                            softWrap: false),
                      ],
                    ),
                  ),
                );
              }).toList()),
        ),
        const SizedBox(height: 20),
        const Padding(
          padding: EdgeInsetsDirectional.only(top: 8.0, start: 8.0),
          child: Text('Uncontained layout'),
        ),
        ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 200),
          child: CarouselView(
            itemExtent: 330,
            shrinkExtent: 200,
            children: List<Widget>.generate(20, (int index) {
              return UncontainedLayoutCard(index: index, label: 'Show $index');
            }),
          ),
        )
      ],
    );
  }
}

class HeroLayoutCard extends StatelessWidget {
  const HeroLayoutCard({
    super.key,
    required this.imageInfo,
  });

  final ImageInfo imageInfo;

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.sizeOf(context).width;
    return Stack(
        alignment: AlignmentDirectional.bottomStart,
        children: <Widget>[
          ClipRect(
            child: OverflowBox(
              maxWidth: width * 7 / 8,
              minWidth: width * 7 / 8,
              child: Image(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/material/${imageInfo.url}'),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(18.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  imageInfo.title,
                  overflow: TextOverflow.clip,
                  softWrap: false,
                  style: Theme.of(context)
                      .textTheme
                      .headlineLarge
                      ?.copyWith(color: Colors.white),
                ),
                const SizedBox(height: 10),
                Text(
                  imageInfo.subtitle,
                  overflow: TextOverflow.clip,
                  softWrap: false,
                  style: Theme.of(context)
                      .textTheme
                      .bodyMedium
                      ?.copyWith(color: Colors.white),
                )
              ],
            ),
          ),
        ]);
  }
}

class UncontainedLayoutCard extends StatelessWidget {
  const UncontainedLayoutCard({
    super.key,
    required this.index,
    required this.label,
  });

  final int index;
  final String label;

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.5),
      child: Center(
        child: Text(
          label,
          style: const TextStyle(color: Colors.white, fontSize: 20),
          overflow: TextOverflow.clip,
          softWrap: false,
        ),
      ),
    );
  }
}

enum CardInfo {
  camera('Cameras', Icons.video_call, Color(0xff2354C7), Color(0xffECEFFD)),
  lighting('Lighting', Icons.lightbulb, Color(0xff806C2A), Color(0xffFAEEDF)),
  climate('Climate', Icons.thermostat, Color(0xffA44D2A), Color(0xffFAEDE7)),
  wifi('Wifi', Icons.wifi, Color(0xff417345), Color(0xffE5F4E0)),
  media('Media', Icons.library_music, Color(0xff2556C8), Color(0xffECEFFD)),
  security(
      'Security', Icons.crisis_alert, Color(0xff794C01), Color(0xffFAEEDF)),
  safety(
      'Safety', Icons.medical_services, Color(0xff2251C5), Color(0xffECEFFD)),
  more('', Icons.add, Color(0xff201D1C), Color(0xffE3DFD8));

  const CardInfo(this.label, this.icon, this.color, this.backgroundColor);
  final String label;
  final IconData icon;
  final Color color;
  final Color backgroundColor;
}

enum ImageInfo {
  image0('The Flow', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_1.png'),
  image1('Through the Pane', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_2.png'),
  image2('Iridescence', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_3.png'),
  image3('Sea Change', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_4.png'),
  image4('Blue Symphony', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_5.png'),
  image5('When It Rains', 'Sponsored | Season 1 Now Streaming',
      'content_based_color_scheme_6.png');

  const ImageInfo(this.title, this.subtitle, this.url);
  final String title;
  final String subtitle;
  final String url;
}

class CustomFlowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Flow(
        delegate: CustomFlowDelegate(),
        children: List.generate(10, (index) {
          return Container(
            width: 80,
            height: 80,
            color: Colors.primaries[index % Colors.primaries.length],
            child: Center(
              child: Text(
                'Item $index',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          );
        }),
      ),
    );
  }
}

class CustomFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    double x = 0.0;
    double y = 0.0;
    for (int i = 0; i < context.childCount; i++) {
      final childSize = context.getChildSize(i)!;
      if (x + childSize.width > context.size.width) {
        // เริ่มบรรทัดใหม่เมื่อความกว้างเกินขอบเขต
        x = 0;
        y += childSize.height;
      }
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
      x += childSize.width;
    }
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return false;
  }
}

class GradientGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, // จำนวนคอลัมน์ใน GridView
        crossAxisSpacing: 4.0,
        mainAxisSpacing: 4.0,
        childAspectRatio: 1.0,
      ),
      itemCount: 100, // จำนวนรายการใน GridView
      itemBuilder: (context, index) {
        // คำนวณเฉดสีที่แตกต่างกันไปในแต่ละรายการ
        final startColor = Color.lerp(Colors.blue, Colors.red, index / 100)!;
        final endColor = Color.lerp(Colors.green, Colors.yellow, index / 100)!;

        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [startColor, endColor],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Center(
            child: Text(
              'Item ${index + 1}',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      },
    );
  }
}

class IndexedStackExample extends StatefulWidget {
  @override
  _IndexedStackExampleState createState() => _IndexedStackExampleState();
}

class _IndexedStackExampleState extends State<IndexedStackExample> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // การแสดงผล widget ที่ใช้ IndexedStack
        Expanded(
          child: IndexedStack(
            index: _selectedIndex,
            children: <Widget>[
              _buildPage('Home Page', Colors.blue),
              _buildPage('Settings Page', Colors.green),
              _buildPage('Profile Page', Colors.orange),
            ],
          ),
        ),
        // ปุ่มสำหรับสลับหน้าจอ
        BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildPage(String title, Color color) {
    return Container(
      color: color,
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  }
}

class DynamicLayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // ขนาดของพื้นที่ที่มีอยู่
        double width = constraints.maxWidth;
        double height = constraints.maxHeight;

        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: width * 0.8, // กำหนดความกว้างเป็น 80% ของพื้นที่ที่มีอยู่
                height: height * 0.4, // กำหนดความสูงเป็น 40% ของพื้นที่ที่มีอยู่
                color: Colors.blue,
                child: Center(
                  child: Text(
                    '80% Widthn40% Height',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              SizedBox(height: 20), // ระยะห่างระหว่าง Container
              Container(
                width: width * 0.5, // กำหนดความกว้างเป็น 50% ของพื้นที่ที่มีอยู่
                height: height * 0.2, // กำหนดความสูงเป็น 20% ของพื้นที่ที่มีอยู่
                color: Colors.red,
                child: Center(
                  child: Text(
                    '50% Widthn20% Height',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class GradientListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100, // จำนวนรายการใน ListView
      itemBuilder: (context, index) {
        // คำนวณเฉดสีที่แตกต่างกันไปในแต่ละรายการ
        final startColor = Color.lerp(Colors.blue, Colors.red, index / 100)!;
        final endColor = Color.lerp(Colors.green, Colors.yellow, index / 100)!;

        return Container(
          height: 50, // กำหนดความสูงของแต่ละรายการ
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [startColor, endColor],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Center(
            child: Text(
              'Item ${index + 1}',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      },
    );
  }
}

class GradientRowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // จัดเรียง container ให้ห่างกันเท่ากัน
        children: [
          _buildGradientContainer(Colors.red, Colors.orange),
          _buildGradientContainer(Colors.blue, Colors.purple),
          _buildGradientContainer(Colors.green, Colors.yellow),
        ],
      ),
    );
  }

  Widget _buildGradientContainer(Color startColor, Color endColor) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [startColor, endColor],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(12.0), // เพิ่มมุมมน
      ),
    );
  }
}

class ExclusiveNews extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          // รูปภาพด้านล่าง
          Image.network(
            'https://www.peanutsquare.com/wp-content/uploads/2023/06/Flutter-3.0-Whats-New-and-How-to-Get-Started-jpg.webp',
            width: 300,
            height: 200,
            fit: BoxFit.cover,
          ),
          // ข้อความด้านบน
          Container(
            width: 300,
            height: 200,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.6), // พื้นหลังโปร่งใส
            ),
            child: Text(
              'Exclusive News: Flutter 3.0 Released!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    );
  }
}

class PremierLeagueTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Table(
        border: TableBorder.all(),
        columnWidths: {
          0: FixedColumnWidth(50.0),
          1: FlexColumnWidth(),
          2: FixedColumnWidth(50.0),
          3: FixedColumnWidth(50.0),
          4: FixedColumnWidth(50.0),
        },
        children: [
          TableRow(
            decoration: BoxDecoration(color: Colors.grey[300]),
            children: [
              _buildTableHeader('Pos'),
              _buildTableHeader('Team'),
              _buildTableHeader('P'),
              _buildTableHeader('W'),
              _buildTableHeader('Pts'),
            ],
          ),
          _buildTableRow(1, 'Manchester City', 38, 29, 90),
          _buildTableRow(2, 'Liverpool', 38, 28, 89),
          _buildTableRow(3, 'Chelsea', 38, 21, 74),
          _buildTableRow(4, 'Tottenham', 38, 22, 71),
          // เพิ่มทีมอื่น ๆ ได้ตามต้องการ
        ],
      ),
    );
  }

  TableRow _buildTableRow(int position, String team, int played, int wins, int points) {
    return TableRow(
      children: [
        _buildTableCell(position.toString()),
        _buildTableCell(team),
        _buildTableCell(played.toString()),
        _buildTableCell(wins.toString()),
        _buildTableCell(points.toString()),
      ],
    );
  }

  Widget _buildTableHeader(String text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        text,
        style: TextStyle(fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _buildTableCell(String text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        text,
        textAlign: TextAlign.center,
      ),
    );
  }
}

class WrapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0, // ระยะห่างระหว่าง widget ลูกในแนวนอน
          runSpacing: 8.0, // ระยะห่างระหว่างแถวในแนวตั้ง
          alignment: WrapAlignment.center, // การจัดแนว widget ลูกในแนวตั้ง
          runAlignment: WrapAlignment.center, // การจัดแนวแถวในแนวตั้ง
          children: List.generate(20, (index) {
            return Container(
              width: 100 + (index % 5) * 20, // ขนาดของ widget ลูกที่เปลี่ยนแปลง
              height: 100, // ความสูงของ widget ลูก
              color: Colors.primaries[index % Colors.primaries.length], // สีของ widget ลูก
              child: Center(
                child: Text(
                  'Item ${index + 1}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}