Obsidian/Recognition/Programing/Flutter/Table UI 예제 1.md

4.8 KiB

class _MyAppState extends State<MyApp> {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Table'),
          ),
          body: Center(
              child: Column(children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blue.shade400),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Table(
                          border: TableBorder(
                             horizontalInside: BorderSide(color: Colors.blue.shade400),
                            right: BorderSide(color: Colors.blue.shade400)
                          ),
                          children: [
                            TableRow(
                                decoration: BoxDecoration(
                                    color: Colors.blue.shade100,
                                        borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0))
                                ),
                                children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('I', style: myLabelTextStyle,))),
                            ]),
                            TableRow(
                                decoration: BoxDecoration(
                                    color: Colors.blue.shade100,
                                ),
                                children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('He', style: myLabelTextStyle,))),
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('She', style: myLabelTextStyle,))),
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('It', style: myLabelTextStyle,))),
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('You', style: myLabelTextStyle,))),
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('We', style: myLabelTextStyle,))),
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('They', style: myLabelTextStyle,))),
                            ]),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Table(
                          border: TableBorder.symmetric(inside: BorderSide(color: Colors.blue.shade400)),
                          children: [
                            TableRow(
                                decoration: BoxDecoration(
                                    color: Colors.blue.shade100,
                                    borderRadius: BorderRadius.only(topRight: Radius.circular(10.0))
                                ),
                                children: [
                              Container(
                                  height: 30.0,
                                  child: Center(child: Text('Am', style: myLabelTextStyle,)))
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 90.0,
                                  child: Center(child: Text('Is', style: myLabelTextStyle,)))
                            ]),
                            TableRow( children: [
                              Container(
                                  height: 90.0,
                                  child: Center(child: Text('Are', style: myLabelTextStyle,)))
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ]))),
    );
  }
}