Flutter for SwiftUI Devs - Getting started

앞에서 Flutter와 SwiftUI의 개요와 구성에 대한 이야기를 했다면,

오늘부터는 UI development의 기초를 이야기할 예정이다!

 

 Getting started 

SwiftUI에서는 앱을 시작하기 위해 App을 이용한다.

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            HomePage()
        }
    }
}

그리고 app의 body를 View protocol을 따르는 struct에 둔다.

struct HomePage: View {
  var body: some View {
    Text("Hello, World!")
  }
}

 

Flutter는 runApp 함수에 나의 app의 instance를 넘긴다.

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

App은 widget이고, build는 UI를 그리는 method이다.

주로 app을 시작할 때 CupertinoApp과 같은 WidgetApp으로 시작한다.

CupertinoApp으로 시작하면, iOS 앱처럼 보인다.

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

  @override
  Widget build(BuildContext context) {
    // Returns a CupertinoApp that, by default,
    // has the look and feel of an iOS app.
    return const CupertinoApp(
      home: HomePage(),
    );
  }
}

 

 Scaffold, Center 

Homepage에서 쓰인 widget은 Scaffold로 시작하는데, Scaffold는 앱의 기본 구조를 만든다.

Scaffold는 공사장에서 쓰이는 임시 가설물인데, UI 구조를 만든다고 생각해도 될 것 같다.

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Hello, World!',
        ),
      ),
    );
  }
}

SwiftUI는 기본적으로 View의 내용을 중앙에 위치하도록 렌더링 한다.

하지만 Flutter는 그렇지 않다. Scaffold는 body를 스크린의 가운데 레더링하지 않는다.

Text를 가운데 두기 위해서는, Center로 감싸주어야 한다.

 

 

---

Flutter for SwiftUI Developers