Scroll View in Flutter – SwiftUI – Compose

Flutter:

import 'package:flutter/material.dart';
import 'package:flutter_ui_demo/screen/widget/custom_button.dart';
import 'package:flutter_ui_demo/screen/widget/custom_button_with_icon.dart';
import 'package:flutter_ui_demo/screen/widget/custom_text.dart';
import 'package:flutter_ui_demo/screen/widget/image_widget.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children:  [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children:  const [
                  CustomText(label: 'Home'),
                  CustomButton(),
                  CustomButtonWithIcon(),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: 100,
                      height: 50,
                      child: ImageWidget(),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: 100,
                      height: 50,
                      child: ImageWidget(),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: 100,
                      height: 50,
                      child: ImageWidget(),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: 100,
                      height: 50,
                      child: ImageWidget(),
                    ),
                  )

                ],
              ),

            ),
            
            Column(
              children: const[
                CustomText(label: 'Home'),
                CustomButton(),
                CustomButtonWithIcon(),
                SizedBox(
                  width: 100,
                  height: 50,
                  child: ImageWidget(),
                )

              ],
            )

            
            
          ],
        )
      )
    );
  }
}

SwiftUI:

import SwiftUI

struct HomeScreenView: View {
    var body: some View {
        VStack {
            
            ScrollView(.horizontal) {
                HStack {
                    Text("Text1")
                    Text("Text2")
                    Text("Text3")
                    Text("Text4")
                    Text("Text5")
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                        .frame(width: 100,height: 50)
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                        .frame(width: 100,height: 50)
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                        .frame(width: 100,height: 50)
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                        .frame(width: 100,height: 50)
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                        .frame(width: 100,height: 50)
                }
                
            }
                        
            TextUIView()
            ButtonView()
            ButtonWithIconView()
            ImageView()
        }
    }
}

struct HomeScreenView_Previews: PreviewProvider {
    static var previews: some View {
        HomeScreenView()
    }
}

Compose:

@Composable
fun HomeScreen() {
    Column() {

        Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
            CustomText("Next page")
            CustomButton("Next page")
            CustomButtonWithIcon("Edit", Icons.Filled.Edit)
            Box(modifier = Modifier
                .width(100.dp)
                .height(50.dp)) {
                CustomImageView()
            }

        }

        CustomText("Next page")
        CustomButton("Next page")
        CustomButtonWithIcon("Edit", Icons.Filled.Edit)
        CustomImageView()

    }
}