텍스트 링크
자습서 추천
효과도
코드
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
void main() {
debugPaintSizeEnabled = true;
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var container = Container(
decoration: BoxDecoration(
color: Colors.black26,
),
child: Column(
children: [
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 5.0, color: Colors.black),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(0.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
],
),
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.red),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(16.0),
child: Image.asset('images/timg.jpeg'),
),
),
],
),
],
),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: container,
),
);
}
}
분석하다.
분석1: 디버깅 모드 열기 두 장의 그림을 분석해서 하나의column의children에 놓고 두 줄로 나누고 한 줄에 두 개의container를 추가한다.
분석3 테두리 추가, 테두리 색상 및 너비 설정