[Flutter] BoxShadow으로 심플한 UI 만들기

다음 예제에서는 3개의 Container 위젯이 있는 Flutter 애플리케이션을 만듭니다. 이러한 Container 위젯은 각각 다른 Box 그림자 속성으로 설정됩니다. 두 번째 Container 위젯에 적용한 것처럼 여러 Box 그림자를 적용할 수도 있습니다.

main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  static const String _title = 'Flutter Tutorial';
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}
 
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
 
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const SizedBox(height: 20,),
          Container(
            height: 150,
            width: 150,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              boxShadow: const [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 5,
                  spreadRadius: 1,
                  offset: Offset(4, 4)
                ),
              ],
              color: Colors.green[200],
            ),
            child: const Text('Container 1'),
          ),
          const SizedBox(height: 20,),
          Container(
            height: 150,
            width: 150,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              boxShadow: const [
                BoxShadow(
                    color: Colors.blue,
                    blurRadius: 3,
                    spreadRadius: 5,
                    offset: Offset(0, 0)
                ),
                BoxShadow(
                    color: Colors.red,
                    blurRadius: 5,
                    spreadRadius: 1,
                    offset: Offset(5, 5)
                ),
              ],
              color: Colors.green[200],
            ),
            child: const Text('Container 2'),
          ),
          const SizedBox(height: 20,),
          Container(
            height: 150,
            width: 150,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              boxShadow: const [
                BoxShadow(
                    color: Colors.deepPurpleAccent,
                    blurRadius: 10,
                    spreadRadius: 0,
                    offset: Offset(0, 0)
                ),
              ],
              color: Colors.green[200],
            ),
            child: const Text('Container 3'),
          ),
        ]
      ),
    );
  }
}

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

[Flutter] BoxShadow으로 심플한 UI 만들기


댓글

댓글 쓰기

이 블로그의 인기 게시물

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] Radio 클래스 사용하기

이미지
이 예제에서는 3개의 라디오 버튼 위젯이 있는 Flutter 애플리케이션을 생성합니다. 라디오 위젯은 라디오 버튼만 표시하고 레이블은 표시하지 않습니다. 레이블도 표시하기 위해 레이블 텍스트가 제목 속성에 할당되고 라디오 버튼이 선행 속성에 할당된 ListTile 위젯을 사용합니다.
자세한 내용 보기

[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(  ...
자세한 내용 보기