[Flutter] DataTable를 사용하여 데이터 테이블 그리기

다음 예에서는 3개의 열 레이블과 3개의 행이 있는 간단한 DataTable을 정의합니다.

main.dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - DataTable'),
          ),
          body: ListView(children: <Widget>[
            Center(
                child: Text(
              'Students',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
            DataTable(
              columns: [
                DataColumn(label: Text('RollNo')),
                DataColumn(label: Text('Name')),
                DataColumn(label: Text('Class')),
              ],
              rows: [
                DataRow(cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Arya')),
                  DataCell(Text('6')),
                ]),
                DataRow(cells: [
                  DataCell(Text('12')),
                  DataCell(Text('John')),
                  DataCell(Text('9')),
                ]),
                DataRow(cells: [
                  DataCell(Text('42')),
                  DataCell(Text('Tony')),
                  DataCell(Text('8')),
                ]),
              ],
            ),
          ])),
    );
  }
}

이 Flutter 애플리케이션을 실행하면 아래와 같이 UI에 DataTable이 표시됩니다.

스크린샷 [안드로이드 에뮬레이터, ios 시뮬레이터]


댓글

댓글 쓰기

이 블로그의 인기 게시물

Flutter ElevatedButton 사용방법

이미지
다음 Flutter 애플리케이션에서  'Click Me' 라는 텍스트와 함께 ElevatedButton을 표시할 것입니다. main.dart import 'package:flutter/material.dart' ;   void main() => runApp( const MyApp());   /// main application widget class MyApp extends StatelessWidget {    const MyApp({Key? key}) : super (key: key);      static const String _title = 'Flutter Tutorial' ;      @override    Widget build(BuildContext context) {      return const MaterialApp(        title: _title,        home: MyStatelessWidget(),      );    } }   /// stateless widget that the main application instantiates class MyStatelessWidget extends StatelessWidget {    const MyStatelessWidget({Key? key}) : super (key: key);      @override    Widget build(BuildContext context) {      return Scaffold(   ...
자세한 내용 보기

[Flutter] FlatButton 클래스 사용하기

이미지
이 예제 Flutter 애플리케이션에서는 기본 FlatButton을 표시한 다음 텍스트 색상 및 버튼 색상과 같은 일부 스타일을 지정했습니다. main.dart import 'package:flutter/material.dart' ;   void main() {    runApp(MyApp()); }   class MyApp extends StatefulWidget {    @ override    _MyAppState createState() => _MyAppState(); }   class _MyAppState extends State<MyApp> {    @ override    Widget build(BuildContext context) {      return MaterialApp(        home: Scaffold(            appBar: AppBar(              title: Text( 'Flutter FlatButton' ),            ),            body: Center(child: Column(children: <Widget>[              Container(  ...
자세한 내용 보기