どのようにフラッタの背景画像を設定するには?

すべてのモバイルアプリケーションは、エンドユーザーの要件に基づいて別の背景色、背景画像があります.だから今日の記事では、我々はどのように背景画像を設定してフラッタに行くだろうか?
どのようにフラッタの背景画像を設定するには?
ユーザーが画面全体を埋めるためにイメージを望むならば、あなたはboxfitの発作で飾り付けイメージを使うことができます.カバー.

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

また、ユーザーはContainer Widget記事を読むことができます.
また、ユーザーはDecoratedBox Widgetを使用して同じことを達成することができます.次のようなコードスニペットを考えます.

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

出力は以下のようになります.

フラッターの背景画像
ユーザーは、フルスクリーンにイメージストレッチを行うためにStack Widgetを使用することができます.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

コンテナーウィジェットを使用し、その高さを無限大としてマークできます.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Background Image"),
          ),
          body: SizedBox(
            height: double.infinity,
            width: double.infinity,
            child: FittedBox(
              fit: BoxFit.cover,
              child: Image.network(
                'https://images.unsplash.com/photo-1547721064-da6cfb341d50',
              ),
            ),
          )),
    );
  }

出力は以下のようになります.

まとめ

この記事では、我々はフラッタの背景画像を設定する方法をされている?
読書ありがとう.
どきどきする.
あなたがフラッタのデザインとフラッターの開発との任意の支援が必要な場合はお知らせください!
私たちはあなたを支援するのが大好きだ.
FlutterAgency.comは、フラッタ技術とフラッター開発者に捧げられる我々のポータルプラットホームです.ポータルはフラッターウィジェットガイド、フラッタプロジェクト、コードLIBSなどのようなフラッターからクールなリソースがいっぱいです.