가로, 새로로 배치 하기 (Column과 Row)

1. 처음 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(),
    );
  }
}

 

 

2. Column 사용해 보기

main.dart

body부분을 바꿔 준다. 위처럼

그럼 children[] 을 사용할 수가 있는데, 이것은 여러 컴포넌트를 넣을 수 있다는 것이다.

만약 child 라면 하나의 컴포넌트밖에 사용할 수 없다

 

children: [
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
],

그리고 children을 위와 같이 해보자

새로로 배치되는 것을 확일 할 수가 있다

그러므로 Column은 새로로 배치하는 것이다.

 

3. Row 사용해보기

column이었던 부분을 Row로 바꿔본다

그러면 가로로 향하게 된다.

그러므로 Row는 가로로 배치하는 것이다.

 

다음시간에는 ListView와 SingleChildScrollView을 사용해 보도록 한다.