আমি কীভাবে বিড়বিড় করে উইজেটে ছায়া যুক্ত করতে পারি?

Question

নীচের ছবির মতো আমি কীভাবে উইজেটে ছায়া যুক্ত করতে পারি?

এটি আমার বর্তমান উইজেট কোড।

Comments

একবার দেখুন

— রউফ রহিচে

আপনি স্ট্যাক ব্যবহার করতে পারেন

— অক্ষয় পালিওয়াল

Answer 1

পরীক্ষা করে দেখুন BoxShadow এবং BoxDecoration

এ Containerএকটি নিতে পারে BoxDecoration(আপনি যে কোডটি মূলত পোস্ট করেছিলেন তা বন্ধ করে দেওয়া) যা নিতে পারেboxShadow

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

স্ক্রিনশট

Comments

সমস্ত কিছুই কেবল চেয়ে ভাল

— শিনরিयो

দুর্দান্ত উত্তর - tnx! আপনি কীভাবে বোতামটির উপর রিপল প্রভাব ফেলবেন? বর্তমানে এটি বোতামের নিচে pp

— নাইটজানওয়ে

borderRadius: BorderRadius.circular(10.0)প্রতিটি সীমানা একই থাকলে ব্যবহার করা ভাল ।

— বিনোথ ভিনো

Answer 2

ব্যবহার করুন BoxDecorationসঙ্গে BoxShadow।

নীচের বিকল্পগুলির সাথে চালিত করার জন্য এখানে একটি ভিজ্যুয়াল ডেমো রয়েছে:

• অস্বচ্ছতা
• এক্স অফসেট
• y অফসেট
• অস্পষ্ট ব্যাসার্ধ
• ব্যাসার্ধ ছড়িয়ে

অ্যানিমেটেড জিএফ রঙগুলির সাথে এত ভাল করে না। আপনি এটি একটি ডিভাইসে নিজে চেষ্টা করতে পারেন।

এখানে এই ডেমোটির সম্পূর্ণ কোড রয়েছে:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ShadowDemo(),
      ),
    );
  }
}

class ShadowDemo extends StatefulWidget {
  @override
  _ShadowDemoState createState() => _ShadowDemoState();
}

class _ShadowDemoState extends State<ShadowDemo> {
  var _image = NetworkImage('https://placebear.com/300/300');

  var _opacity = 1.0;
  var _xOffset = 0.0;
  var _yOffset = 0.0;
  var _blurRadius = 0.0;
  var _spreadRadius = 0.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child:
          Container(
            decoration: BoxDecoration(
              color: Color(0xFF0099EE),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, _opacity),
                  offset: Offset(_xOffset, _yOffset),
                  blurRadius: _blurRadius,
                  spreadRadius: _spreadRadius,
                )
              ],
            ),
            child: Image(image:_image, width: 100, height: 100,),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 80.0),
            child: Column(
              children: <Widget>[
                Spacer(),
                Slider(
                  value: _opacity,
                  min: 0.0,
                  max: 1.0,
                  onChanged: (newValue) =>
                  {
                    setState(() => _opacity = newValue)
                  },
                ),
                Slider(
                  value: _xOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _xOffset = newValue)
                  },
                ),
                Slider(
                  value: _yOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _yOffset = newValue)
                  },
                ),
                Slider(
                  value: _blurRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _blurRadius = newValue)
                  },
                ),
                Slider(
                  value: _spreadRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _spreadRadius = newValue)
                  },
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

Answer 3

স্ক্রিনশট:

---

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.8),
        spreadRadius: 10,
        blurRadius: 5,
        offset: Offset(0, 7), // changes position of shadow
      ),
    ],
  ),
  child: Image.asset(chocolateImage),
)

Answer 4

কনটেইনারটির অভ্যন্তরে শ্যাডো কালারযুক্ত উপাদান ব্যবহার করুন:

Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10)),
      boxShadow: [
        BoxShadow(
            color: Color(0xffA22447).withOpacity(.05),
            offset: Offset(0, 0),
            blurRadius: 20,
            spreadRadius: 3)
      ]),
  child: Material(
    borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)),
    elevation: 5,
    shadowColor: Color(0xffA22447).withOpacity(.05),
    color: Color(0xFFF7F7F7),
    child: SizedBox(
      height: MediaQuery.of(context).size.height / 3,
    ),
  ),
)

Answer 5

এইভাবে আমি এটি করেছি

    Container(
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey[200],
        blurRadius: 2.0, // has the effect of softening the shadow
        spreadRadius: 2.0, // has the effect of extending the shadow
        offset: Offset(
          5.0, // horizontal, move right 10
          5.0, // vertical, move down 10
        ),
      )
    ],
  ),
  child: Container( 
       color: Colors.white, //in your example it's blue, pink etc..
       child: //your content
  )

Answer 6

প্রদত্ত উত্তরগুলি বাইরের ছায়া অর্থাৎ উইজেটের আশেপাশের কৌশলগুলি করে। আমি সীমানার মধ্যে থাকা উইজেটে একটি ছায়া চেয়েছিলাম এবং গিথুব ইস্যু অনুসারে শ্যাডোবক্সে এখনও কোনও ইনসেট অ্যাট্রিবিউট নেই। আমার কর্মসংস্থানটি স্ট্যাক উইজেট ব্যবহার করে গ্রেডিয়েন্টের সাথে উইজেটের একটি স্তর যুক্ত করা ছিল যাতে দেখে মনে হয় উইজেটের নিজের ছায়া রয়েছে। আপনাকে অবশ্যই মাত্রার জন্য মিডিয়াকিউয়ারি ব্যবহার করতে হবে অন্যথায় লেআউটটি বিভিন্ন ডিভাইসে গণ্ডগোল হবে। আরও ভাল বোঝার জন্য এখানে কোডের একটি নমুনা দেওয়া হয়েছে:

Stack(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/sampleFaces/makeup.jpeg"),
                    // fit: BoxFit.cover,
                  ),
                ),
                height: 350.0,
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter,
                    colors: [
                      Colors.black.withOpacity(0.0),
                      Colors.black54,
                    ],
                    stops: [0.95, 5.0],
                  ),
                ),
              )
            ],
          ),

Answer 7

class ShadowContainer extends StatelessWidget {
  ShadowContainer({
    Key key,
    this.margin = const EdgeInsets.fromLTRB(0, 10, 0, 8),
    this.padding = const EdgeInsets.symmetric(horizontal: 8),
    this.circular = 4,
    this.shadowColor = const Color.fromARGB(
        128, 158, 158, 158), //Colors.grey.withOpacity(0.5),
    this.backgroundColor = Colors.white,
    this.spreadRadius = 1,
    this.blurRadius = 3,
    this.offset = const Offset(0, 1),
    @required this.child,
  }) : super(key: key);

  final Widget child;
  final EdgeInsetsGeometry margin;
  final EdgeInsetsGeometry padding;
  final double circular;
  final Color shadowColor;
  final double spreadRadius;
  final double blurRadius;
  final Offset offset;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      padding: padding,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(circular),
        boxShadow: [
          BoxShadow(
            color: shadowColor,
            spreadRadius: spreadRadius,
            blurRadius: blurRadius,
            offset: offset,
          ),
        ],
      ),
      child: child,
    );
  }
}

Answer 8

ঝাঁকুনিতে পাত্রে বক্স ছায়া যুক্ত করুন

  Container(
      margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10)
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
  )

এখানে আমার আউটপুট